search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.73k stars 26.85k forks source link

Roadmap for react-scripts@2.0 #3815

Closed gaearon closed 6 years ago

gaearon commented 6 years ago

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:

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:

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:

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:

  1. Features may be broken or not work as expected
  2. There will be more breaking changes introduced before the final release ⚠️
  3. 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.2150693d

Known Issues in 2.x Alphas

None, currently.

Please report any other bugs you encounter or behavior you believe to be incorrect. Have fun!

isaacguerreir commented 6 years ago

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?

gaearon commented 6 years ago

Sure, maybe! Please message me on Twitter.

Timer commented 6 years ago

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!

ro-savage commented 6 years ago

Any plans for the plugin system @Timer worked on in #2784 in v2? Being able to add TypeScript / Relay / Etc would be useful and it feels that CRA has matured to a place where a plugin model seems possible.

ro-savage commented 6 years ago

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.

MichaelDeBoey commented 6 years ago

I'd like to suggest #3834 as well to be included in the next release 🙂

andriijas commented 6 years ago

Tried 2.0 with a large app that uses react-app-rewire to extend some config (add less support) and the transition is flawless. 👍

Timer commented 6 years ago

Any plans for the plugin system @Timer worked on in #2784 in v2?

No, sorry!

It'd also be great if React Hot Loader

We already have a PR for hot reloading but we're blocked on a chrome sourcemap bug https://github.com/facebookincubator/create-react-app/pull/2304.

ChuksFestus commented 6 years ago

It would be great if there's finally support for postcss without ejecting

gaearon commented 6 years ago

@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.

ttraenkler commented 6 years ago

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.

oriSomething commented 6 years ago

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:

  1. For example default-case force me to add many empty default: even though I don't need.
  2. Because some 3rd party analytics I need to add to end less files /* globals trackJs */ (and please don't tell me using window.something, it has it's own caveat and it's a workaround, not a solution).
  3. Using Modernizr 3.0 that force me to put in the src folder 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.
  4. 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

ttraenkler commented 6 years ago

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.

gaearon commented 6 years ago

What about cssnext - the "babel" for css: http://cssnext.io ?

We had a discussion in https://github.com/facebookincubator/create-react-app/issues/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?

oriSomething commented 6 years ago

@gaearon I will, I'll try also to find related issues, and make the exmples a with a bit more information

andriijas commented 6 years ago

@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

gaearon commented 6 years ago

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.

Aftabnack commented 6 years ago

Am I missing something, or webpack 4 is actually not part of this roadmap?

miraage commented 6 years ago

@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.

Timer commented 6 years ago

@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).

andriijas commented 6 years ago

Now that the bugfix of #3856 is merged, can we have a new alpha build? Thanks <3

Timer commented 6 years ago

react-scripts@2.0.0-next.47d2d941 has been released.

Changes:

edit: an earlier version of this comment said version 03604a46, please upgrade to 47d2d941

detrohutt commented 6 years ago

Any kind of estimate on when the next alpha will be released? :pray:

Timer commented 6 years ago

@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.

detrohutt commented 6 years ago

@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. :)

doronnac commented 6 years ago

Love it! Since Babel 7 is in, are there any plans to incorporate Typescript support down the road?

detrohutt commented 6 years ago

@doronnac I started work on a PR to allow the .ts/.tsx extensions as an entry point, but haven't received any feedback on whether they're on board with that yet.

kellyrmilligan commented 6 years ago

@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.

gaearon commented 6 years ago

@kellyrmilligan Yes please send against next, thanks.

gaearon commented 6 years ago

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.

gbarkhatov commented 6 years ago

@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.

gaearon commented 6 years ago

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.

kellyrmilligan commented 6 years ago

@gaearon @Timer set up a new pr against next branch.

https://github.com/facebook/create-react-app/pull/4158

Janpot commented 6 years ago

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 start
rista404 commented 6 years ago

@Janpot the issue is documented here #4154, and there are currently 2 PRs, #4159 and #4166 with potential fixes.

renatonmendes commented 6 years ago

Same error as @Janpot . Used create-react-app@2.0.0-next.9754a231 and error disappeared.

sohkai commented 6 years ago

In case anyone was also wondering, yes, there is a react-scripts@2.0.0-next.9754a231 released with #4159 merged.

Edit: Oops, total lie (see below). That's actually an older version.

bpierre commented 6 years ago

@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

doodirock commented 6 years ago

Can't wait to start using 2.0. I've been hoping for CSS module support for a while now.

NMinhNguyen commented 6 years ago

@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 https://github.com/facebook/create-react-app/issues/4154#issuecomment-373561890 for more context.

sohkai commented 6 years ago

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 :(

ro-savage commented 6 years ago

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.

And then I gave up.

gaearon commented 6 years ago

@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.

ro-savage commented 6 years ago

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.

bradfordlemley commented 6 years ago

@ro-savage To fix thenpm 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

ro-savage commented 6 years ago

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.

Timer commented 6 years ago

react-scripts@2.0.0-next.b2fd8db8 has been released.

Changes:

swp44744 commented 6 years ago

@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.".

alexeyraspopov commented 6 years ago

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.

alexeyraspopov commented 6 years ago

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?