Roadmap for react-scripts@2.0
gaearon opened this issue · 91 comments
We have just released react-scripts@1.1.0 and, aside from critical vulnerabilities or similar issues, we intend this to be the last 1.x release. Our work on the 2.x release of react-scripts is in the next branch, and we switched it to be the default on GitHub. This way people who automatically sync their forks with master will only get non-breaking updates until the next branch is truly ready.
Already Merged
So what’s gonna be in 2.x? Here’s a few big things that are already in the next branch:
- Babel 7 (#3522)
- Jest 22 (#3124)
- Babel Macros (#3675)
- ES6-compatible Uglify (#3618)
- Configurable Target Browsers (JS: #3770, CSS: #3644)
- Compile
node_moduleswith Env Preset (#3776) - Parallelization of Babel (#3778)
- Preflight Dependency Check (#3771)
- Opt-in support for CSS Modules (#2285)
- Opt-in support for Sass (#4195)
- SVG as React components (#3718)
- Remove
propTypesdefinitions in the production build (#3818) - Service workers are now opt-in (#2554)
- Support for Lerna or Yarn Workspaces (#1333)
Very Likely to Land in 2.0 (But Might Need Your Help)
There are many more things we want to do but it will require help from the community. For now, they’re optimistically tagged with a 2.0.0 milestone (issues, PRs) but it’s likely we’ll only get to some of them. If you feel strongly about any of them, look at these issues, offer help if you’d like to increase their changes of getting landed, provide feedback to people who submit PRs, help them with planning and design, etc. What gets merged in the end really depends on your participation.
I feel strongly that these are blockers that should get into 2.0:
- Warn about duplicate dependencies (#2011)
- More end-to-end test coverage for compiling
node_modules(#3777, needs PRs)
They’re relatively fleshed out although Sass will need somebody to make a PR once other pieces are in place. We should also figure out a way to make Sass work with CSS Modules. We’ll also need a PR for making service workers opt-in.
Issues and PRs That Need More Work and Discussion
These look less fleshed out to me and might need more discussion, design, and implementation work:
- Long term caching (#2206, we have a PR in #2206 but maybe we want webpack/webpack#6281 instead? needs somebody to figure out the tradeoffs)
- Add a separate lint script (#2729)
- Serve development from the same path as production (#1887, broken hot reloading seems a bit wonky to me but maybe you can convince me otherwise)
- Refuse to build when importing transitive dependencies (#1752, needs testing and potentially someone picking it up)
Please Participate!
So, what do you think? Does this list look exciting to you? If you want to help, please participate. I don’t expect that I’ll have a ton of time to work on all of this personally, but we have a really great community and I hope you can help us flesh out these proposals. If you also want to help maintaining the project (and have some experience maintaining open source projects; not necessarily large ones) please also let us know.
☢️ How Can I Test This Now? ☢️
We're happy you'd like to test the next version of react-scripts! Before getting into the details, we'd like to make you aware of a few things:
- Features may be broken or not work as expected
- There will be more breaking changes introduced before the final release
⚠️ - Documentation for new features is still sparse, so look through the pull requests for how they're expected to work
You can install the latest alpha version of react-scripts using one of the following commands:
$ # Create a new application
$ npx create-react-app@next --scripts-version=2.0.0-next.2150693d app-name
$ # Upgrade an existing application
$ yarn upgrade react-scripts@2.0.0-next.2150693dKnown Issues in 2.x Alphas
None, currently.
Please report any other bugs you encounter or behavior you believe to be incorrect. Have fun!
Hi, @gaearon!
I'm really excited about this announcement. The create-react-app is a important tool in my work and side projects. I don't have experience with open source projects and the source code of create-react-app but I would like to contribute. Do you think that people with no experience could contribute?
Sure, maybe! Please message me on Twitter.
We have released the first alpha version of react-scripts! See OP for instructions.
Please let us know of any bugs in new issues, thanks!
It'd also be great if React Hot Loader (https://github.com/gaearon/react-hot-loader/tree/next) could be integrated in, if its matured to that point. I really miss having forms stay filled in when editing code.
I'd like to suggest #3834 as well to be included in the next release 🙂
Tried 2.0 with a large app that uses react-app-rewire to extend some config (add less support) and the transition is flawless. 👍
It would be great if there's finally support for postcss without ejecting
@ChuksFestus Which specific postcss plugins? There's been a lot of discussion about how "custom properties" plugin is not actually future-proof and not safe to enable by default. Are there others you consider safer? Note we don't want people to lock themselves into using features that aren't actually going to be a part of CSS in the future.
What about cssnext - the "babel" for css: http://cssnext.io ?
As a sidenote, is it possible to import variables or plain css from other .css files from a .modules.css file currently in CRA? The upcoming CSS modules is very welcome, but for theming we need to import and reference CSS in other .css files within them as well.
It would be nice to support custom ESLint preset without ejecting. I understand the philosophy of not wanting to have any config files, but in many cases it become very annoying:
- For example
default-caseforce me to add many emptydefault:even though I don't need. - Because some 3rd party analytics I need to add to end less files
/* globals trackJs */(and please don't tell me usingwindow.something, it has it's own caveat and it's a workaround, not a solution). - Using Modernizr 3.0 that force me to put in the
srcfolder automatic generated file. Means I need to inject/* eslint-disable */in the file so I can build the final output without an extra network call. - Not to mention, I can't bring custom ESLint plugins. So if there is a really useful ESLint plugin which can improve the project, it's impossible
Don't get me wrong, I fully understand your philosophy and admire your work. But, on the other hand you lock me with your "configuration" for a linter with specific rules which makes me it harder work for me than not having it from the first place, which there is no easy way to opt out without ejecting. Moreover, you actually do have configurations such as "homepage". Even if it's not much. ESLint is one of the biggest pain points for me in the create-react-app
I think it quickly becomes unfeasible if there is more than one or two configurations to be supported - but being able to eject one can always break free in "unsupported land". The only downside is to not being able to upgrade to new versions of react-scripts anymore.
Therefore, what I think would be nice is to be able to record the steps (in the philosophy of replayable redux actions) as kind of "patches" applied after ejecting so they can be applied to a new version of create-react-app react-scripts without having to manually note them down and apply them.
What about cssnext - the "babel" for css: http://cssnext.io ?
We had a discussion in #130. The conclusion was that they're not being entirely clear about which features are safe and which features aren't. If you can suggest a safe future-proof subset, happy to include it by default. But even custom properties aren't safe.
is it possible to import variables or plain css from other .css files from a .modules.css file currently in CRA?
Not quite sure what you mean, but we'd allow whatever CSS Modules normally allows. For example https://github.com/css-modules/css-modules#composing-from-other-files.
It would be nice to support custom ESLint preset without ejecting. I understand the philosophy of not wanting to have any config files, but in many cases it become very annoying
And for those cases we ask you to file issues 😉 . We always asked people to share specific examples where our default rules don't work, and we're happy to consider changing them. Could you please copy paste your comment into a new issue and we can take it from there?
@gaearon I will, I'll try also to find related issues, and make the exmples a with a bit more information
@Timer is it possible to get a new 2.x build weekly or something to be able to keep testing cra2 continuously with existing apps? Thanks
You can subscribe to this thread. We’ll comment whenever we release a new alpha. The next one is blocked on a bugfix that @iansu is looking into.
Am I missing something, or webpack 4 is actually not part of this roadmap?
@Aftabnack IMHO webpack 4 will take a while to get all dependencies updated due to breaking changes. If you ask me CRA can easily wait till webpack and eco updates to 4 and then release it during 2.x milestone.
@Aftabnack we'd love to include webpack 4 in the 2.0.0 release, but we'll have to see where the state of the ecosystem is like @miraage said.
Luckily, we can release webpack 4 in 2.0.1 if it's ready by then [it doesn't need to wait for the next major] (or any other patch/minor release).
Now that the bugfix of #3856 is merged, can we have a new alpha build? Thanks <3
react-scripts@2.0.0-next.47d2d941 has been released.
Changes:
- Using SVG inside CSS is now fixed
- Service workers are now opt-in
- Workspaces & Lerna support
edit: an earlier version of this comment said version 03604a46, please upgrade to 47d2d941
Any kind of estimate on when the next alpha will be released? 🙏
@detrohutt there hasn't been much progress since the last alpha, is there something in mind you're looking for?
We're getting ready to wrap up Sass support and will re-evaluate the readiness of webpack 4. Hopefully something by Friday.
@Timer I was mainly just interested in my PR that landed recently, because right now I'm manually repatching the file every time I run yarn to make it work with my nohoist setup. But it's not a big deal, I can just switch to using my fork for now. Was mainly just curious. Thanks for the quick response. :)
Love it! Since Babel 7 is in, are there any plans to incorporate Typescript support down the road?
@gaearon just synced my pr for 1.0 with master, then saw this. should I make a PR into next then?
Serve development from the same path as production (facebookincubator#1887, broken hot reloading seems a bit wonky to me but maybe you can convince me otherwise)
just to note, hot reloading is only broken on subpaths that are hosted behind a proxy. otherwise it is working as advertised.
@kellyrmilligan Yes please send against next, thanks.
Sorry everyone for slow updates, I’ve been pretty swamped with preparing my talk and now with another exciting experimental project we aren’t ready to announce yet. If you want to help move this forward I encourage you to reach out to @iansu and @Timer in private who can point you to contributing opportunities.
@gaearon can you please message here about that experimental project once it's ready? Subscribed to this thread, so will receive email and won't miss out.
If it works out we’ll announce it on the blog and it’ll be really hard to miss. But we’ll only know in a few months.
Trying it out and getting
Failed to compile.
./src/index.js
Module build failed: Error: [BABEL] /proj/src/index.js: Requires Babel "^7.0.0-beta.41", but was loaded with "7.0.0-beta.38". You'll need to update your @babel/core version. (While processing: "/proj/node_modules/babel-preset-react-app/index.js$3")
at Array.map (<anonymous>)
after running
mkdir proj
npx create-react-app@next --scripts-version=2.0.0-next.47d2d941 proj
cd proj
yarn startSame error as @Janpot . Used create-react-app@2.0.0-next.9754a231 and error disappeared.
@Timer Is the react-scripts/package.json of next up to date? It doesn’t seem to match the one published.
https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/package.json
https://unpkg.com/react-scripts@2.0.0-next.9754a231/package.json
Can't wait to start using 2.0. I've been hoping for CSS module support for a while now.
@sohkai, @bpierre It is worth noting that react-scripts@2.0.0-next.9754a231 is an older release that was released on January 18, 2018: https://yarnpkg.com/en/package/react-scripts. The reason it works is because it depends on svgr@1.6.0 which did not have caret version dependencies on @babel/*, which it now does. See #4154 (comment) for more context.
Ahhh, I assumed it was a newer version simply because it worked.
I guess we're simply left to asking for a newer version to be deployed :(
I was trying to contribute to next, including e2e tests. But everything was so broken, that I spent less than 15min on the code and 3hrs on trying to get the tests working before I gave up.
Trying to run yarn e2e:docker on MacOS.
- The e2e scripts
e2e-simple.shande2e-kitchensink.shwouldn't work because ofnpm clean cache. - The tests failed due to linting errors.
- The tests didn't correctly copy the local react-dev-utils
- mocha fails from
js:@babel/register --require @babel/polyfill
And then I gave up.
@ro-savage I don't think many people managed to use e2e:docker successfully. You're very welcome to rewrite it. :-) Personally I stick to running them on CI. Sorry about bad experience, but it takes somebody motivated to fix the test environment.
Is there a way that people can write / modify one of the e2e tests and just run that single modified test?
If we could do that, at least it means we can make sure the tests we write work correctly before waiting for CI to complete.
The issue I had in the past with CI on CRA is that I've done a PR and then later I see it failed in CI (because the test isn't written correctly), I have to make a change, push the commit, wait for CI to run. Rinse & Repeat.
@ro-savage To fix the npm clean cache issue, try specifying a different node-version. Also, you can specify a single test-suite.
My test command is typically something like:
yarn e2e:docker --node-version 8 --test-suite monorepos
Thanks @bradfordlemley
I've submitted PR #4193 that addresses some of the CI issues I encountered. Although I don't know the process well enough to know if they are the correct way to fix things.
react-scripts@2.0.0-next.b2fd8db8 has been released.
Changes:
- Upgraded Babel
- Asset manifest is now relative based on your
homepage - Other package upgrades (dotenv, dotenv-expand, etc)
@Timer I am getting "Couldn't find package \"babel-preset-react-app@4.0.0-next.b2fd8db8\" required by \"react-scripts@2.0.0-next.b2fd8db8\" on the \"npm\" registry.".
I was able to create an app with existing create-react-app/react-scripts version and do yarn add react-scripts@2.0.0-next.b2fd8db8 afterwards. babel-preset-react-app@4.0.0-next.b2fd8db8 was successfully installed. Commands test, build, and start work without any issues. Gonna do some more tests by using newer preset-env features and CSS Modules.
Attempting to use async generators that seems to be available with the latest (7+) Babel Preset Env, I'm getting this:
Failed to compile.
./src/App.js
Syntax error: /Users/alexey/xxx/src/App.js: Support for the experimental syntax 'asyncGenerators' isn't currently enabled (25:15):
23 |
24 |
> 25 | async function* Act() {
| ^
26 |
27 | }
28 |
Add @babel/plugin-proposal-async-generator-functions (https://git.io/vb4yp) to the 'plugins' section of your Babel config to enable transformation.
Any additional settings should be applied to the preset? Shall I open a separate ticket?
Please open a separate ticket. Thanks!
Opened #4206
I did :
$ yarn upgrade react-scripts@2.0.0-next.b2fd8db8But when we I try to start the app I have :
dka@dev-01:[~/tmp/my-app]: npm start
> my-app@0.1.0 start /home/dka/tmp/my-app
> react-scripts start
? We're unable to detect target browsers.
Would you like to add the defaults to your package.json? (Y/n)
Can we have this json injection non interactive?
This will only ever happen for apps which are being migrated, so I'm not sure I see value in adding a non-interactive path.
You could always use yes or probably some echo "\n" that's piped to npm start the first time if that's necessary.
Honestly, idk why configuration is a bad thing, I'd rather have CRA have presets for all the things. like next.js does babel/next, there should be a babel/create-react-app and for postcss, eslint, etc.
That way, if I want to add TypeScript to my babel config, it's literally just me adding 1 change to my config or add postcss I can.
This ☝️. "Zero configuration" is one of those things that reads good, but rarely manage to pull through. IMHO, there's absolutely no excuse why users shouldn't be allowed to add their own .babelrc, .eslintrc, etc. files and override defaults - exactly like what many other tools out there do. At this point, with the level of maturity most tools being used by CRA have, I tend to think it's more related to personal preferences of maintainers rather than having an actual reason behind the decision.
Can we please keep this thread focused on the 2.0 release? This was not intended to be an issue for philosophical discussions because this makes it very noisy and hard to follow the development. Thanks.
I noticed people that SASS opt-in support was mentioned as something people want. Am I the only one who would like to see LESS opt-in support?
Nah my personal opinion is that both could be added easily since one of them are added. Similar config that can be reused with functions
@vsanthanam I understood LESS when they created it (no need to compile to use less), but since it's now build with webpack, what are the differences between using LESS over SASS ?
Does someone have a hint on how I might be able to move my create-react-app dependency to the current HEAD of next as long as there is no new alpha release? I realized today that our current builds break compatibility with IE11 due to #4234
Now I'd be happy if I could advance to a version after that fix in order to fix our builds before a new alpha gets released. Is that easily possible? If so how?
Thanks!
@wrobel It's possible to point a npm dependency to a Git repo and a specific commit, see details here: https://docs.npmjs.com/files/package.json#git-urls-as-dependencies. But the versioned code in the repo itself is not prepared to be consumed as a npm package, you'll probably gonna have to fork it and push the prepared package.
Although I don't think we should be discussing topics that are not specifically related to the 2.0 release as @gaearon pointed out in #3815 (comment). If you still having trouble with that maybe you should open a different issue or ask in Stack Overflow / Twitter ? Or even better, go to Reactiflux's Discord channel: https://www.reactiflux.com/
Hi, we'll be releasing a new alpha soon, for the time being, you can use an old alpha. 😄
I want to get Sass into the next alpha, and it's nearly ready!
@Timer : when is new alpha coming?
Update 22 Apr 18: new alpha there including Sass 😀
Did #4012 get de-scoped from this? I see a reference from this issue on that PR, but don't actually see it in the thread.
@leggomuhgreggo no, but I've added it to the milestone. Thanks for the reminder.
Hi everyone!
react-scripts@2.0.0-next.66cc7a90 was just released 🎉.
📦 Here's what's inside:
- Opt-in Sass support, just install
node-sassand require.sassfiles! - Relax ESLint rule for args
- Check for improper prop type usage
- Fix old browser compatibility when targeted
- Enable
loosemode for class properties, restoring functionality for MobX (because the library is not spec compliant) and reducing bundle size - Tweaked CSS Module
localIdentName
Let us know if you run into any issues. 😄
when I have a component and import as the following, my classnames are empty strings. Any idea why?
import styles from "./Paragraph.module.scss"
@Tasemu You should probably open a separate issue for questions/bug reports. This thread is meant for things directly related to the roadmap/release cycle (expected dates, scope, announcements, etc).
A lot of people are subscribed to this thread and receiving emails each time someone posts here, and questions like yours can easily lead to a bunch of back and forth (and hence notifications). As Dan mentioned recently this makes it hard for others to follow development.
You could reference this thread in your issue when you create it though to show that it's related and help people with similar issues notice it.
Hey guys, I couldn't find an ETA for CRA with react-scripts@2.0, is there a planned released date?
No, it will be released when it's ready. You can help move that forward by contributing. :-)
I am testing react-scripts@2.0.0-next.66cc7a90 (not sure if that is the most recent one)
But I am getting the same message as #3815 (comment) and am not able to confirm with Y :( any idea what I am doing wrong or is this a known issue?
EDIT: confirming ? We're unable to detect target browsers. withY only hanged when running npm start. It seems to work with npm run build, git diff now shows browserslist added in package.json
I left a message over here: #4085 on a merged pull request.
I've been testing react-scripts@next so I can use babel-plugin-macros with my react-apollo app, however this fix does not seem to be in 2.0. Is it possible to have this fix so we can use graphql in the alpha version of react-scripts?
Please file a new issue? It’s hard to track conversation in merged PRs.
Sorry if this is out of place, but are there any instructions for testing the latest code? I'd like to experiment with merge #4077 but not quite sure how it's meant to be tested without a release...
@AndrewCraswell wait till maintainers announce a new tag.
You can track changes for next tag here.
i notice that webpack 4 branch was merged , but when i use react-scripts@2.0.0-next.66cc7a90 create a new application and eject it, webpack 3 still here. that means #4077 is for the tool cra not the application made by cra, right ?
@geminiyellow No release was cut yet with merged in Webpack 4. It's merged in but not published yet.
@strothj thank you. wating...
@gaearon Would it be feasible to create a separate issue for release announcements only and lock comments to avoid notification noise? That’s all I’m interested in knowing about and could then unsubscribe from this issue.
@detrohutt I recommend https://tellmewhenitcloses.com
@pelotom thank you, but I was referring to the beta releases. I’m sure that will be adequate for some people though, so thanks for sharing.
Hi int64go, I believe there will be another release to test webpack 4 integration.
Blockers column: https://github.com/facebook/create-react-app/projects/3
I’ve locked the conversation to only include maintainers so that there is less notification noise for everybody else. I appreciate everyone’s impatience with this, but let’s respect people’s inboxes. :-)
If you want to help out with maintenance please reach out in Twitter DMs. We still could use more help. (Especially in terms of driving project towards the 2.x release: not just feature development, but looking at the overall strategy, finding blockers and resolutions, planning and scoping features.)
There’s a lot of work that’s already been done, but to me 2.0 still feels a bit out of reach, and I think we might want to scope it back a little bit and omit some things we originally planned. I feel like we should time 2.0 final around the same time Babel 7 goes stable, and if something doesn’t make the cut, it should go into 3.x instead.
To all maintainers— please feel free to continue announcements and crucial 2.x related discussion on this thread. I only locked to avoid repetitive comments like “when does this come out”. It will come out when it’s ready, and if you want to help, you can reach out to me.
Hello everyone! Sorry that it has been a while since our last alpha.
We just released react-scripts@2.0.0-next.3e165448
📦 Here's what's inside:
- Webpack 4 (including scope hoisting)
- Quicker recompiles while developing (prevented workers from exiting)
- Updated browser defaults (when creating a new project)
- Upgraded Babel & Jest
- Fixed CSS Modules for Production builds
- Fixed Sass Modules in Jest tests
mjswork-around (only use as fallback overjs)
Let us know if you run into any issues. 😄
note: to use the new browser defaults, remove the browserslist key from package.json and then run npm start. You will be prompted to set the defaults again.
I just released react-scripts@2.0.0-next.a671462c with a security vulnerability fix affecting Windows users. Please upgrade. See #4866 for details.