Closed Timer closed 6 years ago
I'm a bit late to the party. What do you mean with "node_modules
are now compiled"?
I reworded to
Packages using new JavaScript features in node_modules now work
Does this make more sense?
I'm a bit late to the party. What dou you mean with "
node_modules
are now compiled"?
node_modules
bundled with the app?
Thanks @gaearon, I was about to ask the same thing ^.^
I don't think I've ever needed it, but I guess it's nice it's there. Maybe this'll help build proper "goto definition" functionality, right now it keeps jumping to compiled js, and it's a mess.
Does this make more sense?
Yes. Thanks Dan!
I don't think I've ever needed it, but I guess it's nice it's there. Maybe this'll help build proper "goto definition" functionality, right now it keeps jumping to compiled js, and it's a mess.
I think there is some kind of misunderstanding here.
Previously, if somebody published a package that used newer syntax like const
, and you imported that package, your app wouldn't build. We've had dozens of issues filed about this. See all issues linked from https://github.com/facebook/create-react-app/issues/1125. Now it will work.
Have an issue with @next
:
When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.
Actually, there was pretty extensive amount of options for proxy, are they all gone? With target
, pathRewrite
etc.
I used them on alpha as well.
@z-ax this is not a bug -- we removed the proxy options. Please read the migration instructions above. ๐
Good job everyone working on wrapping up the 2.0 release! Thanks for your efforts!
Just tried here. It works. One question:
Why it says 1
instead of vendor
? I guess that's the vendor
bundle.
What if I have async routes and don't want to name them? Can I customize the vendor bundle name?
@Timer I don't see it in docs right here and it was working with the most recent alpha. How should we migrate now without proxy? Why even it was removed? Very helpful for dev envs.
Edit: see it in Roadmap, don't see new docs on this.
@z-ax You can now provide a custom express middleware function as a proxy: https://github.com/facebook/create-react-app/pull/5073. This should give you complete control over the proxy.
Are you planning on getting the typescript PR in or will that come in a minor update post 2.0 release?
@z-ax added the preliminary docs here: https://github.com/facebook/create-react-app/commit/54323f07dc2cd4b0d8ee5cf33d584db75fc0e938
The migration instructions above explain exactly how to migrate in the mean time.
@Timer @gaearon Big changes! ๐ท Would you please point to the PR that enables babel for node_modules
?
Have an errors when using flow in node_modules packages (using yarn workspace)
@pi0 https://github.com/facebook/create-react-app/pull/3776
@meafmira support for workspaces was dropped. Please see the migration instructions (we know they're not great, but we'll be improving them).
@Timer thanks, everything seems working.
But +1 to @zaguiini about file naming. I liked vendors
more, now just have 2 chunks :)
Btw, is it something on my side that chunk 1 has content like this? As I can remember, always had this one on build, for maybe a year or so: (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{1024:function(n,w,o){}}]);
.
Have errors when using flow in node_modules packages and socket.io
Please file an issue with more details @sumitsg10 and a reproducible demo.
@z-ax naming is pretty arbitrary and actually caused really bad behavior for larger apps. I don't think anyone but you (the developer) will ever notice. :-)
I don't think it's expected for Flow to work inside node_modules
. We only compile standard JavaScript features inside node_modules
. This is an intentional design choice to avoid the churn when proposals change, or new versions of Babel come out. You can ask React Native users about how Babel 7 upgrade went for them.
Just a question: Why use modules: false
for dependencies in test env?
@lixiaoyan see the above message from @gaearon, the same reasoning applies
naming is pretty arbitrary and actually caused really bad behavior for larger apps. I don't think anyone but you (the developer) will ever notice. :-)
Yup, main
is also "pretty arbitrary". Lots of people use vendor
as their vendor bundle.
main
's also a convention. Why not drop main
too? See the point?
We make no guarantee that a chunk only contains node_modules
, as it could be a mix of node_modules
and app code.
You can read https://github.com/facebook/create-react-app/issues/4977, https://github.com/facebook/create-react-app/issues/4633, https://github.com/facebook/create-react-app/issues/4632 and a few others to learn why putting all of node_modules
into a vendor chunk is a bad idea.
Feel free to open an issue with webpack to change the default name of the main
chunk to a number.
@Timer Here are two problems with Jest & Babel:
node_modules
.node_modules
in test env (modules: false
disable module transform).which causes:
So we may need to:
node_modules
with different Babel presets.modules: 'commonjs'
for @babel/preset-env
in test env.It will make the transform behavior between Jest and Webpack more consistent.
(ES Module is standard JavaScript feature)
Upgraded an react-scripts@1.1.4 app with ~16kloc of React related code and everything was nearly painless:
eslint
dependency to @^5
. The error message for this was long but awesome!jest
related changes a single test with lots of mocking now hangs and snapshots that use jest.mock() failed: no biggieI don't think I've ever needed it, but I guess it's nice it's there. Maybe this'll help build proper "goto definition" functionality, right now it keeps jumping to compiled js, and it's a mess.
I think there is some kind of misunderstanding here.
Previously, if somebody published a package that used newer syntax like
const
, and you imported that package, your app wouldn't build. We've had dozens of issues filed about this. See all issues linked from #1125. Now it will work.
You're absolutely right! I personally have never had this happen, because most packages seem to come pre-transpiled =)
@Timer Another problem: Babel config may be overridden by a babel.config.js
file, option babelrc: false
is not enough to prevent config overwritten, setting option configFile: false
is needed.
Nice catch, @lixiaoyan! Can you please send a PR disabling this?
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.9.4
info No lockfile found.
[1/4] Resolving packages...
error Couldn't find package "@xtuc/long@4.2.1" required by "@webassemblyjs/wast-parser@1.7.6" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: Couldn't find package "@xtuc/long@4.2.1" required by "@webassemblyjs/leb128@1.7.6" on the "npm" registry.
at MessageError.ExtendableBuiltin (C:\Program Files (x86)\Yarn\lib\cli.js:243:66)
at new MessageError (C:\Program Files (x86)\Yarn\lib\cli.js:272:123)
at PackageRequest.<anonymous> (C:\Program Files (x86)\Yarn\lib\cli.js:38988:17)
at Generator.throw (<anonymous>)
at step (C:\Program Files (x86)\Yarn\lib\cli.js:92:30)
at C:\Program Files (x86)\Yarn\lib\cli.js:105:13
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
Error: Couldn't find package "@xtuc/long@4.2.1" required by "@webassemblyjs/wast-printer@1.7.6" on the "npm" registry.
at MessageError.ExtendableBuiltin (C:\Program Files (x86)\Yarn\lib\cli.js:243:66)
at new MessageError (C:\Program Files (x86)\Yarn\lib\cli.js:272:123)
at PackageRequest.<anonymous> (C:\Program Files (x86)\Yarn\lib\cli.js:38988:17)
at Generator.throw (<anonymous>)
at step (C:\Program Files (x86)\Yarn\lib\cli.js:92:30)
at C:\Program Files (x86)\Yarn\lib\cli.js:105:13
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
Error: Couldn't find package "@xtuc/ieee754@^1.2.0" required by "@webassemblyjs/ieee754@1.7.6" on the "npm" registry.
at MessageError.ExtendableBuiltin (C:\Program Files (x86)\Yarn\lib\cli.js:243:66)
at new MessageError (C:\Program Files (x86)\Yarn\lib\cli.js:272:123)
at PackageRequest.<anonymous> (C:\Program Files (x86)\Yarn\lib\cli.js:38988:17)
at Generator.throw (<anonymous>)
at step (C:\Program Files (x86)\Yarn\lib\cli.js:92:30)
at C:\Program Files (x86)\Yarn\lib\cli.js:105:13
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
Aborting installation.
yarnpkg add --exact react react-dom react-scripts@next --cwd C:\Users\s5201911\Desktop\test-next has failed.
Deleting generated file... package.json
Deleting test-next/ from C:\Users\s5201911\Desktop
Done.
Targetable CSS support
Did CRA uses Browserslist only for Autoprefixer?
Should we change ChangeLog or CRAโs Babel config?
@ai browserslist is only used for CSS. There were too many edge cases where browser target support for babel did not "just work", unfortunately. This is by no fault browserslist's, it seemed to be more of an issue with preset-env
.
I'm getting this error when trying to build,
Module build failed: Cannot read property 'type' of undefined
at Array.some (<anonymous>)
at Array.forEach (<anonymous>)
No file or line number is printed :confused: and my code doesn't have .some
in it. Sadly it's a private repo so I can't share the code.
@holloway Can you please file a new issue with a reproducing project, please?
@Timer
browserslist is only used for CSS. There were too many edge cases where browser target support for babel did not "just work", unfortunately. This is by no fault browserslist's, it seemed to be more of an issue with preset-env.
Can you show edge case examples? I will try to find people who will fix the source of the problem.
Did a fresh install and it works a charm ๐
Anyone has an idea of how to make babel-plugin-react-css-modules
work without ejecting? I've read that this could be accomplished with Babel Macros but I have no idea how to write one for this.
The idea is to have styleName
work without ejecting, as well as gaining all the performance benefits while not having to eject.
You'd need a macro, @davidalejandroaguilar.
I updated one of our apps from 1.1.1
to next
and it worked pretty well. Few jsx-a11y
warnings showed up (easy to fix), but start
, test
and build
scripts were without errors. :tada:
@Timer I don't know how to write plugins/macros, if this is the case, do I need to stick with having to import styles as an object and using className
?
I'm still concerned about that performance regression that Webpack 4 has. I mentioned it here in connection to CRA's dependence on Webpack 4.
I'm not sure whether sokra
's recommendation there (to use the terser-webpack-plugin
if possible) will work without ejecting from CRA, but it seems like something could/should be mentioned somewhere. I checked for any mention in the branch and didn't see any.
I know a number of devs have chewed up a lot of time chasing down this mysterious issue. Anyone using CRA and Font Awesome v5 (as well as any other libraries that have similar layouts as ours that would hit this perf regression) may soon find themselves joining in that debugging party.
It plagues some angular-cli users already.
Hmm, we can definitely switch back to uglify if it's more performant.
We could also profile Terser a bit and see if there's low hanging fruit.
I too have this question from @stramel above:
Are you planning on getting the typescript PR in or will that come in a minor update post 2.0 release?
Given that #4837 is not yet closed, and not yet even building on CI, I assume the answer is not now. But I hope not too long from now ๐ ๐ ๐
BTW, great work! This looks amazing regardless.
In v1 I could use decorators by using react-app-rewired, is it still the case with v2?
I'm getting this error when running my tests, any clue what it could be?
FAIL src/app/any_of_the_test_file.test.js
โ Test suite failed to run
ReferenceError: self is not defined
at node_modules/react-app-polyfill/node_modules/whatwg-fetch/dist/fetch.umd.js:8:40
at Object.<anonymous>.support.searchParams (node_modules/react-app-polyfill/node_modules/whatwg-fetch/dist/fetch.umd.js:2:66)
at Object.<anonymous> (node_modules/react-app-polyfill/node_modules/whatwg-fetch/dist/fetch.umd.js:5:2)
at Object.<anonymous> (node_modules/react-app-polyfill/jsdom.js:10:1)
This happens for all tests.
I've changed my test command from react-scripts test --env=jsdom
to react-scripts test --env=node
.
If I run the tests with the jsdom
version I get all kinds of errors, like TypeError: Cannot read property 'bind' of undefined
on values that are not undefined
.
@Gpx
If you previously disabled jsdom, you may have removed the --env=jsdom flag. Make sure your test script in package.json contains the --env=node flag
That means:
1.0 | 2.0 |
---|---|
react-scripts test --env=jsdom |
react-scripts test |
react-scripts test |
react-scripts test --env=node |
So you just need to remove --env=jsdom
but not add --env=node
.
@lixiaoyan thanks, I didn't understand it.
I modified it and now the error is this
Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "/node_modules/babel-preset-react-app/index.js")
I followed this comment https://github.com/facebook/jest/issues/6913#issuecomment-423684647 and that fixed it.
Now I'm having a lot of errors about TypeError: Cannot read property 'bind' of undefined
Hi everyone! We just released what we hope to be the last beta before v2 is marked stable and tagged
latest
on npm tomorrow.Please try it as soon as possible and let us know if you run into any issues!
Create new application:
Upgrade existing:
Here's a draft of the release notes:
Create React App v2.0.1
New Features
node_modules
now workMigrating from 1.1.15 to 2.0.1
Inside any created project that has not been ejected, run:
Next, follow the migration instructions below that are relevant to you.
You may no longer code split with
require.ensure()
We previously allowed code splitting with a webpack-specific directive,
require.ensure()
. It is now disabled in favor ofimport()
.To switch to
import()
, follow the examples below:Single Module
Multiple Module
The default Jest environment was changed to
jsdom
Look at the
test
entry in thescripts
section of yourpackage.json
. Here's a table how to change it from "before" and "after", depending on what you have there:react-scripts test --env=jsdom
react-scripts test
react-scripts test
react-scripts test --env=node
.mjs
file extension support was removedChange the extension of any files in your project using
.mjs
to just.js
.It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it.
Move advanced proxy configuration to
src/setupProxy.js
This change is only required for individuals who used the advanced proxy configuration in v1.
To check if action is required, look for the
proxy
key inpackage.json
. Then, follow the table below.proxy
key inpackage.json
proxy
is a string (e.g.http://localhost:5000
)proxy
is an objectIf your
proxy
is an object, that means you are using the advanced proxy configuration.Again, if your
proxy
field is astring
, e.g.http://localhost:5000
, you do not need to do anything. This feature is still supported and has the same behavior.First, install
http-proxy-middleware
using npm or Yarn:Next, create
src/setupProxy.js
and place the following contents in it:Now, migrate each entry in your
proxy
object one by one, e.g.:Place entries into
src/setupProxy.js
like so:You can also use completely custom logic there now! This wasn't possible before.
Internet Explorer is no longer supported by default (but you can opt in!)
We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.
First, install
react-app-polyfill
:Next, place one of the following lines at the very top of
src/index.js
:You can read more about these polyfills here.
The behavior of a CommonJS
import()
has changedWebpack 4 changed the behavior of
import()
to be closer in line with the specification.Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required. If you see errors in your application about
... is not a function
, you likely need to update your dynamic import, e.g.:Anything missing?
This was a large release, and we might have missed something.
Pleaseย file an issueย and we will try to help.
Migrating from 2.0.0-next.xyz
If you used 2.x alphas, please follow these instructions.
Detailed Changelog
>> TODO <<