2.0.3 (October 1, 2018)
Create React App 2.0 brings a year’s worth of improvements in a single dependency update.
We summarized all of the changes in a blog post!
Check it out: Create React App 2.0: Babel 7, Sass, and More.
It provides a high-level overview of new features and improvements. Now let's see how to update your app to the latest version in detail.
Migrating from 1.x to 2.0.3
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@2.0.3
or
yarn add --exact react-scripts@2.0.3
If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for (maybe Sass or CSS Modules?) is now supported out of the box. You can find a list of notable new features in the Create React App 2.0 blog post.
Breaking Changes
Like any major release, `react-scripts@2.0` contains a few breaking changes. We expect that they won't affect every user, but we recommend to scan over these sections to see if something is relevant to you. If we missed something, please file a new issue.
Node 6 is no longer supported
Please upgrade to Node 8 (LTS) or later.
Polyfills for IE 9, IE 10, and IE 11 are no longer included 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
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';
import 'react-app-polyfill/ie11';
You can read more about these polyfills here.
Dynamic import()
of a CommonJS module now has a .default
property
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');
const throttle = await import('lodash/throttle').then(m => m.default);
require.ensure()
is superseded by dynamic import()
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');
});
import('module-a').then(a => {
});
Multiple Module
require.ensure(['module-a', 'module-b'], function() {
var a = require('module-a');
var b = require('module-b');
});
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 |
Object proxy
configuration is superseded by src/setupProxy.js
To check if action is required, look for the proxy
key in package.json
and follow this table:
- I couldn't find a
proxy
key in package.json
- The value of
proxy
is a string (e.g. http://localhost:5000
)
- The value of
proxy
is an object
- Follow the migration instructions below.
It's worth highlighting: if your proxy
field is a string
, e.g. http://localhost:5000
, or you don't have it, skip this section. This feature is still supported and has the same behavior.
If your proxy
is an object, that means you are using the advanced proxy configuration. It has become fully customizable so we removed the limited support for the object-style configuration. Here's how to recreate it.
First, install http-proxy-middleware
using npm or Yarn:
npm install http-proxy-middleware
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.
.mjs
file extension support is 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.
PropTypes
definitions are now removed in production
Normally, this shouldn't affect your logic and should make the resulting bundle smaller. However, you may be relying on PropTypes definition for production logic. This is not recommended, and will break now. If a library does it, one possible solution is to file an issue in it with a proposal to use a different field (not propTypes
) to signal that the declaration needs to be retained.
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
For a readable summary of the changes, check out our blog post.
:rocket: New Feature
react-scripts
react-dev-utils
, react-scripts
babel-preset-react-app
babel-preset-react-app
, confusing-browser-globals
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
create-react-app
babel-preset-react-app
, react-scripts
:boom: Breaking Change
react-app-polyfill
, react-scripts
react-scripts
react-dev-utils
babel-preset-react-app
- #3818 Remove PropTypes from production build (#209) (@iansu)
eslint-config-react-app
- #2319 Changes no-unused-expressions lint from warning to error (@amupitan)
eslint-config-react-app
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-scripts
:bug: Bug Fix
react-scripts
react-error-overlay
- #5203 Fix IE 11 compatibility (@Timer)
- #5198 Polyfill error overlay for IE9 support (@Timer)
- #4024 Fix floating caret position incorrect while scrolling overlay (@jihchi)
react-dev-utils
babel-preset-react-app
babel-preset-react-app
, react-error-overlay
, react-scripts
react-app-polyfill
react-error-overlay
, react-scripts
babel-preset-react-app
, react-scripts
- #5078 Prevent the cache of files using Babel Macros (@Timer)
react-dev-utils
, react-error-overlay
, react-scripts
create-react-app
- #4677 Support scoped package names for scripts-version option in create-react-app cli (@bugzpodder)
- #2705 Don't delete error logs when install fails (@mg)
react-dev-utils
, react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
create-react-app
, react-dev-utils
, react-scripts
:nail_care: Enhancement
create-react-app
, react-scripts
react-dev-utils
, react-scripts
react-dev-utils
react-scripts
babel-preset-react-app
, react-error-overlay
, react-scripts
react-dev-utils
, react-error-overlay
, react-scripts
- #4930 Switch from cheap-module-source-map eval-source-map (@jasonLaster)
- #3124 update jest to 22 and support watchPathIgnorePatterns configuration (@aisensiy)
confusing-browser-globals
, react-dev-utils
, react-error-overlay
, react-scripts
babel-preset-react-app
, confusing-browser-globals
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
babel-preset-react-app
create-react-app
- #4375 fix: update envinfo + implementation, update issue_template (@tabrindle)
eslint-config-react-app
, react-error-overlay
, react-scripts
- #4048 Add ESLint check for incorrect propTypes usage (#3840) (@iansu)
- #2690 Bump eslint-plugin-jsx-a11y version (@gaearon)
eslint-config-react-app
create-react-app
, react-dev-utils
, react-scripts
babel-preset-react-app
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
babel-preset-react-app
, react-scripts
babel-preset-react-app
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
:memo: Documentation
react-scripts
- Other
create-react-app
- #4309 Fix typo to word bootstrapped in condition to check for old version o… (@jamesvsshark)
- #4015 add
create-react-app --help
info for local file path --scripts-version
support (@albertstill)
react-dev-utils
, react-scripts
:house: Internal
eslint-config-react-app
- #5205 Disable react/no-deprecated rule (@Timer)
- #5051 Adjust ESLint configuration for v5 (@Timer)
- #4187 Change no-unused-vars 'args' from none to all to show warning on dest… (@goncy)
babel-plugin-named-asset-import
, babel-preset-react-app
, confusing-browser-globals
, create-react-app
, eslint-config-react-app
, react-app-polyfill
, react-dev-utils
, react-error-overlay
, react-scripts
- Other
react-scripts
react-dev-utils
- #5150 Run behavioral smoke tests with Jest, add output tests (@Timer)
- #4514 Make Sass missing message friendlier (@Timer)
- #4138 Allow ModuleScopePlugin accecpts an array as its appSrc (@froyog)
- #4016 (chore): Alphabetize and clean files-array in react-dev-utils package.json (@petetnt)
babel-preset-react-app
, react-error-overlay
, react-scripts
babel-preset-react-app
- #5119 Clean up @babel/plugin-transform-regenerator (@lixiaoyan)
- #5033 Lock babel configuration back to IE 9 support (ES5) (@Timer)
react-dev-utils
, react-scripts
babel-preset-react-app
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
react-error-overlay
, react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
confusing-browser-globals
, react-dev-utils
, react-error-overlay
, react-scripts
react-dev-utils
, react-error-overlay
, react-scripts
create-react-app
react-error-overlay
confusing-browser-globals
, eslint-config-react-app
eslint-config-react-app
, react-scripts
Committers: 116
Releases Before 2.x
Please refer to CHANGELOG-1.x.md for earlier versions.