Description
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:
$ npx create-react-app@next --scripts-version=@next test-next
Upgrade existing:
$ npm install react-scripts@next --save
$ # or
$ yarn add react-scripts@next
Here's a draft of the release notes:
Create React App v2.0.1
New Features
- Updated tooling: Babel 7, webpack 4, Jest 23
- Packages using new JavaScript features in
node_modules
now work - Automatic vendor bundles and long term caching
- CSS Modules
- Sass Support
- SVGs as React Components
- Babel Macros
- Targetable CSS support, with automatic polyfills and prefixing
Migrating from 1.1.15 to 2.0.1
Inside any created project that has not been ejected, run:
$ npm install --save --save-exact react-scripts@2.0.1
$ # or
$ yarn add --exact react-scripts@2.0.1
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 of import()
.
To switch to import()
, follow the examples below:
Single Module
require.ensure(['module-a'], function() {
var a = require('module-a');
// ...
});
// Replace with:
import('module-a').then(a => {
// ...
});
Multiple Module
require.ensure(['module-a', 'module-b'], function() {
var a = require('module-a');
var b = require('module-b');
// ...
});
// Replace with:
Promise.all([import('module-a'), import('module-b')]).then(([a, b]) => {
// ...
});
The default Jest environment was changed to jsdom
Look at the test
entry in the scripts
section of your package.json
.
Here's a table how to change it from "before" and "after", depending on what you have there:
1.x (if you have this...) | 2.x (...change it to this!) |
---|---|
react-scripts test --env=jsdom |
react-scripts test |
react-scripts test |
react-scripts test --env=node |
.mjs
file extension support was removed
Change 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 in package.json
. Then, follow the table below.
- I couldn't find a
proxy
key inpackage.json
- No action is required!
- The value of
proxy
is a string (e.g.http://localhost:5000
)- No action is required!
- The value of
proxy
is an object- Follow the migration instructions below.
If your proxy
is an object, that means you are using the advanced proxy configuration.
Again, if your proxy
field is a string
, 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:
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
Next, create src/setupProxy.js
and place the following contents in it:
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
// ...
}
Now, migrate each entry in your proxy
object one by one, e.g.:
"proxy": {
"/api": {
"target": "http://localhost:5000/"
},
"/*.svg": {
"target": "http://localhost:5000/"
}
}
Place entries into src/setupProxy.js
like so:
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:5000/' }))
app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}
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
:
$ npm install react-app-polyfill --save
$ # or
$ yarn add react-app-polyfill
Next, place one of the following lines at the very top of src/index.js
:
import 'react-app-polyfill/ie9'; // For IE 9-11 support
import 'react-app-polyfill/ie11'; // For IE 11 support
You can read more about these polyfills here.
The behavior of a CommonJS import()
has changed
Webpack 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.:
const throttle = await import("lodash/throttle");
// replace with
const throttle = await import("lodash/throttle").then(m => m.default);
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 <<
Activity
[-]Last call for `react-scripts` v2[/-][+]Last call for Create React App v2[/+]zaguiini commentedon Sep 26, 2018
I'm a bit late to the party. What do you mean with "
node_modules
are now compiled"?gaearon commentedon Sep 26, 2018
I reworded to
Does this make more sense?
ozzie1998 commentedon Sep 26, 2018
node_modules
bundled with the app?jordyvandomselaar commentedon Sep 26, 2018
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.
zaguiini commentedon Sep 26, 2018
Yes. Thanks Dan!
gaearon commentedon Sep 26, 2018
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.dmythro commentedon Sep 26, 2018
Have an issue with
@next
: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.
Timer commentedon Sep 26, 2018
@Z-AX this is not a bug -- we removed the proxy options. Please read the migration instructions above. 😄
andriijas commentedon Sep 26, 2018
Good job everyone working on wrapping up the 2.0 release! Thanks for your efforts!
165 remaining items
gaearon commentedon Oct 1, 2018
Sorry, that sounds like a Yarn failure so we can't help with it.
pimlottc-gov commentedon Oct 1, 2018
@gaearon okay, I mention it though because I didn't have this issue before I upgraded
react-scripts
.JeffBaumgardt commentedon Oct 1, 2018
Looks like there is a new release of eslint@5.6.1 that CRA is complaining about if you have eslint installed local.
gaearon commentedon Oct 1, 2018
I mean, in general we never supported installing
eslint
at top level of your project.JeffBaumgardt commentedon Oct 1, 2018
I know this is the official stance and this discussion should take place elsewhere but I think many people who are using CRA in a production / semi-production setup use
eslint
to do more than in editor linting tasks.gaearon commentedon Oct 1, 2018
I understand where you're coming from — I'm not saying we're opposed on principle but I'm saying that it has always caused hard-to-debug issues like this due to how ESLint doesn't allow presets to encapsulate their plugins. ESLint plans to fix this in ESLint 5 so that will solve the issue permanently. In the meantime, we want to warn our users that when they do something like this, our setup can break.
Again, you can ignore our warning, just as the warning says. Or maybe we're talking about different things. Did you notice the warning provides instructions for how to turn it off at the bottom?
gaearon commentedon Oct 2, 2018
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
R4z1ell commentedon Oct 13, 2018
I've followed the instructions from the proxy migrations but they don't work for me, i've installed the
'http-proxy-middleware' package and created the 'setupProxy.js' file inside the 'src' folder in my client but
it's not working, any idea?
gaearon commentedon Oct 13, 2018
@R4z1ell Please file a new issue.