NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #4095 most downloaded on npm
webpack utilities used by Create React App
Last release 2 years ago
no release in 18 months
Ships unpredictably
gaps range from 2 weeks to 2.8 years
Some releases are documented
notes for 16 of the last 60 stable releases
Nothing withdrawn
no release was ever pulled
10 years old
116 releases · first in 2016
Nothing published for this version
Nothing published for this version
Nothing published for this version
One column per quarter.
Nothing published for this version
Nothing published for this version
Nothing published for this version
Create React App 5.0.1 is a maintenance release that improves compatibility with React 18. We've also updated our templates to use createRoot and rela
Create React App 5.0.1 is a maintenance release that improves compatibility with React 18. We've also updated our templates to use createRoot and relaxed our check for older versions of Create React App.
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@5.0.1
or
yarn add --exact react-scripts@5.0.1
react-scripts
create-react-app
react-dev-utils
cra-template-typescript, cra-template, react-scripts
createRoot (@kyletsang)cra-template-typescript, cra-template
eslint-config-react-app
Like any major release, react-scripts@5.0.0 contains a number of breaking changes. We expect that they won't affect every user, but we recommend you l…
Create React App 5.0 is a major release with several new features and the latest version of all major dependencies.
Thanks to all the maintainers and contributors who worked so hard on this release! 🙌
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@5.0.0
or
yarn add --exact react-scripts@5.0.0
NOTE: You may need to delete your node_modules folder and reinstall your dependencies by running npm install (or yarn) if you encounter errors after upgrading.
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 is now supported out of the box.
Like any major release, react-scripts@5.0.0 contains a number of breaking changes. We expect that they won't affect every user, but we recommend you look over this section to see if something is relevant to you. If we missed something, please file a new issue.
Node 10 reached End-of-Life in April 2021 and Node 12 will be End-of-Life in April 2022. Going forward we will only support the latest LTS release of Node.js.
create-react-app
babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-error-overlay, react-scripts
react-scripts
react-scripts
react-scripts
eslint-config-react-app, react-error-overlay, react-scripts
create-react-app
react-dev-utils
create-react-app, react-scripts
serve has changed (@leo)eslint-config-react-app
react-dev-utils
babel-preset-react-app, eslint-config-react-app
cra-template
npm ci (@lukekarrys)create-react-app
babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
react-scripts
babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
confusing-browser-globals, cra-template-typescript, cra-template, create-react-app
react-error-overlay, react-scripts
babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
react-dev-utils, react-scripts
react-scripts
babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-error-overlay, react-scripts
babel-preset-react-app, react-dev-utils, react-error-overlay, react-scripts
react-dev-utils
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
v4.0.1 is a maintenance release that includes minor bug fixes and documentation updates.
v4.0.1 is a maintenance release that includes minor bug fixes and documentation updates.
react-scripts
React is not defined compilation error after ejected (@n3tr)react-dev-utils
react-scripts
create-react-app, react-dev-utils, react-scripts
cra-template-typescript, cra-template, react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@4.0.1
or
yarn add --exact react-scripts@4.0.1
Like any major release, react-scripts@4.0.0 contains a number of breaking changes. We expect that they won't affect every user, but we recommend you l…
Create React App 4.0 is a major release with several new features, including support for Fast Refresh!
Thanks to all the maintainers and contributors who worked so hard on this release! :raised_hands:
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@4.0.0
or
yarn add --exact react-scripts@4.0.0
NOTE: You may need to delete your node_modules folder and reinstall your dependencies by running yarn (or npm install) if you encounter errors after upgrading.
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 is now supported out of the box.
Like any major release, react-scripts@4.0.0 contains a number of breaking changes. We expect that they won't affect every user, but we recommend you look over this section to see if something is relevant to you. If we missed something, please file a new issue.
We've upgraded to ESLint 7 and added many new rules including some for Jest and React Testing Library as well as the import/no-anonymous-default-export rule. We've also upgraded eslint-plugin-hooks to version 4.0.0 and removed the EXTEND_ESLINT flag as it is no longer required to customize the ESLint config.
We've upgraded to Jest 26 and now set resetMocks to true by default in the Jest config.
We've switched to the Workbox InjectManifest plugin and moved the PWA templates into their own repository.
typescript flag and NODE_PATH supportWe've removed the deprecated typescript flag when creating a new app. Use --template typescript instead. We've also dropped deprecated NODE_PATH flag as this has been replaced by setting the base path in jsconfig.json.
We've changed the loading order of env files to match the dotenv specification. See #9037 for more details.
Node 8 reached End-of-Life at the end of 2019 and is no longer supported.
eslint-config-react-app, react-error-overlay, react-scripts
react-scripts
create-react-app
cra-template-typescript, cra-template, react-scripts
react-dev-utils, react-scripts
eslint-config-react-app, react-error-overlay, react-scripts
cra-template-typescript, cra-template, eslint-config-react-app, react-error-overlay, react-scripts
eslint-config-react-app
create-react-app
cra-template-typescript, cra-template, react-scripts
babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
create-react-app, react-scripts
react-scripts
babel-plugin-named-asset-import, babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-scripts
cra-template-typescript, cra-template, create-react-app, react-app-polyfill, react-dev-utils, react-scripts
babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, react-dev-utils, react-error-overlay, react-scripts
react-scripts
babel-preset-react-app, eslint-config-react-app, react-scripts
eslint-config-react-app, react-scripts
create-react-app
babel-preset-react-app
react-dev-utils
react-dev-utils, react-scripts
cra-template-typescript, cra-template, react-scripts
react-scripts
babel-preset-react-app, eslint-config-react-app, react-scripts
cra-template
babel-preset-react-app, react-scripts
react-dev-utils, react-scripts
react-dev-utils, react-error-overlay, react-scripts
cra-template-typescript, cra-template
create-react-app
react-dev-utils
cra-template-typescript, cra-template
react-scripts
cra-template-typescript, cra-template, react-dev-utils, react-scripts
babel-preset-react-app
eslint-config-react-app
cra-template-typescript, cra-template
react-dev-utils
cra-template
babel-preset-react-app
react-scripts
react-scripts
react-error-overlay, react-scripts
babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-error-overlay, react-scripts
eslint-config-react-app, react-dev-utils, react-scripts
babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-error-overlay, react-scripts
cra-template-typescript, cra-template
react-app-polyfill
react-dev-utils
babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, react-dev-utils, react-error-overlay, react-scripts
babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
babel-preset-react-app, create-react-app, react-dev-utils, react-error-overlay, react-scripts
babel-plugin-named-asset-import, babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-scripts
babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, react-dev-utils, react-error-overlay, react-scripts
Nothing published for this version
v3.1.2 is a maintenance release that includes minor bug fixes and documentation updates.
v3.1.2 is a maintenance release that includes minor bug fixes and documentation updates.
react-scripts
babel-preset-react-app, react-error-overlay, react-scripts
react-scripts
react-scripts
babel-plugin-named-asset-import, confusing-browser-globals, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
react-scripts
eslint-config-react-app, react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@3.1.2
or
yarn add --exact react-scripts@3.1.2
v3.1.1 is a maintenance release that includes minor bug fixes and documentation updates.
v3.1.1 is a maintenance release that includes minor bug fixes and documentation updates.
react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@3.1.1
or
yarn add --exact react-scripts@3.1.1
v3.1.0 is a minor release that adds ESLint 6 support as well as experimental support for extending and customizing the ESLint config along with other
v3.1.0 is a minor release that adds ESLint 6 support as well as experimental support for extending and customizing the ESLint config along with other minor bug fixes and documentation updates.
eslint-config-react-app, react-error-overlay, react-scripts
eslint-config-react-app, react-scripts
react-dev-utils
react-scripts
react-scripts
eslint-config-react-app, react-error-overlay, react-scripts
react-dev-utils
react-scripts
eslint-config-react-app
react-error-overlay, react-scripts
react-scripts
jsx: "react" in tsconfig (@kingdaro)react-dev-utils
eslint-config-react-app, react-error-overlay, react-scripts
eslint-config-react-app
create-react-app
eslint-config-react-app
react-error-overlay, react-scripts
babel-preset-react-app
react-scripts
react-error-overlay, react-scripts
babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-error-overlay, react-scripts
eslint-config-react-app, react-scripts
react-scripts
react-dev-utils
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@3.1.0
or
yarn add --exact react-scripts@3.1.0
Nothing published for this version
v3.0.1 is a maintenance release that adjusts some ESLint rules for TypeScript along with other minor bug fixes and documentation updates.
v3.0.1 is a maintenance release that adjusts some ESLint rules for TypeScript along with other minor bug fixes and documentation updates.
react-error-overlay, react-scripts
babel-jest (@ianschmitz)babel-jest preflight error (@ianschmitz)eslint-config-react-app
no-dupe-class-members rule for TypeScript (@ianschmitz)no-useless-constructor rule in TypeScript (@ianschmitz)eslint-config-react-app, react-scripts
default-case lint rule for TypeScript (@ianschmitz)react-dev-utils
react-dev-utils, react-scripts
babel-preset-react-app
react-scripts
react-app-polyfill
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@3.0.1
or
yarn add --exact react-scripts@3.0.1
Like any major release, react-scripts@3.0.0 contains a few breaking changes. We expect that they won't affect every user, but we recommend you look ov…
Create React App 3.0 brings some exciting new features including support for Hooks!
Thanks to all the maintainers and contributors who worked so hard on this release! :tada:
browserslist support in @babel/preset-env: #6608jsconfig.json/tsconfig.json: #6656Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@3.0.0
or
yarn add --exact react-scripts@3.0.0
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 is now supported out of the box.
Like any major release, react-scripts@3.0.0 contains a few breaking changes. We expect that they won't affect every user, but we recommend you look over this section to see if something is relevant to you. If we missed something, please file a new issue.
We've updated from Jest 23 to get the latest improvements in Jest 24. We've noticed some differences in snapshot serialization in Jest 24, so you may need to adjust your tests slightly once you update. You can read more about what's changed in the Jest 24 blog post.
We now enforce Rules of Hooks with eslint-plugin-react-hooks. If you are breaking any of the rules of Hooks this will cause your build to fail.
We now lint TypeScript files. You can see the list of rules we enforce to check if your project is compatible. If you're using Visual Studio Code you can follow our guide to setup up your editor to display lint warnings.
browserslist support in @babel/preset-envThe browserslist config in your package.json is now used to control the output of your JavaScript files. You can use separate configuration for development and production. See here for a good starting point which gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production
We've removed the --no-watch flag from the start script in favor of Jest's own --watchAll=false.
asset-manifest.jsonAll asset paths have been moved under the files key in asset-manifest.json.
jsconfig.json/tsconfig.jsonWe now support setting baseUrl in jsconfig.json and tsconfig.json. To configure baseUrl to point to the src directory in your JavaScript project, create a jsconfig.json file in your project root:
```json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
```
If you have a TypeScript project you can configure baseUrl the same way in your tsconfig.json.
Currently the only supported options for baseUrl are node_modules (the default) and src.
You can now include a version of Normalize.css in your project that will use your browserslist setting to generate the appropriate styles for your target browsers. To include it simply add @import-normalize at the top of one of your CSS files.
react-scripts
babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-scripts
babel-preset-react-app, eslint-config-react-app, react-scripts
babel-preset-react-app, react-dev-utils, react-scripts
react-scripts
babel-preset-react-app, react-app-polyfill
babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app, react-scripts
babel-preset-react-app, eslint-config-react-app, react-scripts
babel-preset-react-app, react-dev-utils, react-scripts
react-dev-utils
react-scripts
create-react-app
react-scripts
react-scripts eject warning. (@lffg)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
babel-preset-react-app, react-app-polyfill
create-react-app
react-dev-utils
react-scripts
react-scripts
babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
react-dev-utils
eslint-config-react-app
react-scripts
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
babel-preset-react-app
babel-preset-react-app, react-dev-utils, react-error-overlay, react-scripts
react-dev-utils
eslint-config-react-app
eslint-config-react-app, react-scripts
babel-preset-react-app, eslint-config-react-app, react-scripts
babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
Nothing published for this version
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…
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!<br>
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.
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.
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.
Please upgrade to Node 8 (LTS) or later.
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'; // For IE 9-11 support
import 'react-app-polyfill/ie11'; // For IE 11 support
You can read more about these polyfills here.
import() of a CommonJS module now has a .default propertyWebpack 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);
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');
// ...
});
// 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]) => {
// ...
});
jsdomLook 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 |
proxy configuration is superseded by src/setupProxy.jsTo check if action is required, look for the proxy key in package.json and follow this table:
proxy key in package.json
proxy is a string (e.g. http://localhost:5000)
proxy is an object
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 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.
PropTypes definitions are now removed in productionNormally, 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.
This was a large release, and we might have missed something.
Please file an issue and we will try to help.
If you used 2.x alphas, please follow these instructions.
For a readable summary of the changes, check out our blog post.
For the detailed changelog, please see CHANGELOG.md.
Nothing published for this version
Nothing published for this version
Nothing published for this version
Inside any created project that has not been ejected, run:
react-dev-utils, react-scripts
react-dev-utils
eslint-config-react-app
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@1.0.5
or
yarn add --dev --exact react-scripts@1.0.5
Fix a regression in published package.
react-error-overlay
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@1.0.4
or
yarn add --dev --exact react-scripts@1.0.4
react-dev-utils, react-error-overlay
react-dev-utils
eslint-config-react-app
react-dev-utils, react-error-overlay
console calls into a check. (@BrodaNoel)react-scripts
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@1.0.3
or
yarn add --dev --exact react-scripts@1.0.3
react-dev-utils, react-error-overlay
react-dev-utils, react-scripts
react-dev-utils, react-error-overlay
react-dev-utils
react-scripts
git status. (@milocosmopolitan)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@1.0.2
or
yarn add --dev --exact react-scripts@1.0.2
If you previously had issues with an Invalid Host Header error, follow these new instructions to fix it.
react-dev-utils, react-error-overlay
react-scripts
NODE_PATH=src for npm start and npm run build. (@ApacheEx)NODE_PATH=src for Jest. (@gaearon)"homepage" field. (@gaearon).env.local in test environment. (@gaearon)react-dev-utils
react-dev-utils, react-error-overlay
react-error-overlay
eslint-config-react-app
react-scripts
<noscript> to template's index.html. (@viankakrisna)react-scripts
.env.* files are supported. (@AJamesPhillips)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@1.0.1
or
yarn add --dev --exact react-scripts@1.0.1
Please refer to the Jest 19 and Jest 20 breaking changes for migration instructions.
We’ve been working on this release for the past few months, and there are many big impovements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps.
So instead of just enumerating them here, we decided to write a blog post about all the new features.
Check it out: What’s New in Create React App.
Have you read it? Now let's see how to update your app to the latest version.
First, ensure you are using the latest Node 6 LTS or newer. In 1.0.0, we have dropped support for Node 4 and NPM 2.
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@1.0.0
You may also optionally update the global command-line utility for bug fixes:
npm install -g create-react-app
src/We've never supported importing files from outside src/, nor have we supported running tests outside of src/.<br>
We also never explicitly forbid doing so, which caused confusion when things didn't work like they should.
When running or building your application, you may see a message like so:
You attempted to import ... which falls outside of the project src/ directory.
To remedy this, simply move any files that you import within src/ and update your relative imports accordingly. This enforces that files that import each other stay in src/, and other folders serve different purposes (e.g. the public/ folder just gets served from the root).
If you used relative imports outside the project directory as a way to share code with another project, consider using a monorepo instead, so that other projects are symlinked to your project's node_modules/. Then you can import them as a Node modules.
While running npm test, you may notice some of your tests are missing. Please move any top-level test directory (i.e. __test__, __spec__) or files (i.e. *.test.js, *.spec.js) into src/. Conversely, if you have some similarly named files that you don’t want Jest to run, move them outside of src/.
Moment.js locales are now purposely excluded from the bundle unless explicitly depended on.
Please import the locales you need:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';
You can no longer import a file and expect to receive its contents as an encoded string.<br> This behavior was confusing and inconsistent depending on the file size.
Importing files with unknown extensions will now always include them into the build and return a valid URL.
If you'd like to import a file's contents as a string, consider contributing to #1944. For the time being, you must embed assets within an export:
// sample.txt
export default `i want
this data as a string
`;
You can then import this as so:
import sampleText from './sample.txt';
// ...
window qualifierPlease prefix any global method with window., you may experience this with methods such as confirm.
Simply update references from confirm to window.confirm.
Note that this new lint error will likely uncover legitimate accidental uses of global variables where you meant to define a local variable instead.
You can no longer use AMD import syntax, nor define an import anywhere other than the top of the file.
This is to reduce confusion around import statements, which do not allow you to evaluate code between them.
We have enabled a new set of rules to help make applications more accessible, please take time to learn about the errors and fix them.
You can search for every lint rule name in the right column and read its description on the web. The fixes are usually very simple.
We have enabled the lint warnings about React APIs deprecated in React 15.5. You can automatically convert your project to fix them by running the corresponding codemods.
Please refer to the Jest 19 and Jest 20 breaking changes for migration instructions.
If you use snapshots, you will likely need to update them once because of the change in format.
The old, 2009 specification for Flexbox is deprecated and is 2.3x slower than the latest specification.
We are no longer polyfilling it automatically.
Follow these steps if you see errors about missing lint rules in the editor.
npm install in your project (or yarn)If you still have the problem please file an issue.
After the regular update procedure above, add these line to <head> in public/index.html:
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
Then create a file called public/manifest.json that looks like this:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Finally, create src/registerServiceWorker.js with this template, import it from src/index.js and call the function it exports.
This was a large release, and we might have missed something.
Please file an issue and we will try to help.
Unhandled Promise rejections will now crash tests. You can fix them by explicitly catching the errors you don’t care about.
For a readable summary of the changes, check out our blog post.
react-dev-utils, react-scripts
react-scripts
src/ (#544). (@motevets)eslint-config-react-app, react-dev-utils
eslint-config-react-app, react-error-overlay, react-scripts
eslint-plugin-jsx-a11y and activate more rules. (@AlmeroSteyn)eslint-config-react-app, react-scripts
react-scripts
react-dev-utils, react-scripts
eslint-config-react-app, react-scripts
eslint-plugin-jsx-a11y and activate more rules. (@AlmeroSteyn)react-scripts
react-scripts and add require.resolve() to loaders. (@gaearon).eslintignore. (@Timer)localhost when offline (Windows). (@bunshar)http:// or https://. (@bunshar)detect-port. (@Andreyco)react-dev-utils
openBrowser now supports urls with more than one parameter. (@alisonmonteiro)openBrowser() when BROWSER=open on macOS. (@bpierre)cwd. (@chrisdrackett)create-react-app
react-dev-utils, react-scripts
react-dev-utils, react-error-overlay
react-scripts
yarn build instead of yarn run build. (@geoffdavis92)serve for running in production. (@leo)yarn instead of yarnpkg when creating a new application. (@lpalmes)X-FORWARDED headers for proxy requests. (@johann-sonntagbauer)eslint-config-react-app, react-dev-utils
react-error-overlay, react-scripts
babel-preset-react-app, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
eslint-config-react-app
eslint-config-react-app, react-scripts
react-dev-utils
create-react-app
react-scripts
.eslintrc effects. (@luftywiranda13).eslintrc for IDE lint plugins. (@gaearon)node-sass alternative. (@michaelwayman).env for enabling polling mode. (@gaearon)npm run watch-css command. (@mklemme)yarn.lock. (@viankakrisna)babel-preset-react-app
react-scripts
url import in Webpack config. (@pd4d10)react-dev-utils, react-scripts
babel-preset-react-app, react-scripts
create-react-app, react-dev-utils, react-scripts
appveyor.yml. (@Timer)babel-preset-react-app, create-react-app, eslint-config-react-app, react-dev-utils, react-scripts
eslint-config-react-app
eslint-config-react-app, react-dev-utils, react-scripts
react-dev-utils
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Updates react-dev-utils dependency
react-scripts)react-dev-utils dependencyreact-dev-utils)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@0.5.1
Adds support for `public` folder with arbitrary assets. (@gaearon in #703)
react-scripts)public folder with arbitrary assets. (@gaearon in #703).env file. (@ayrton in #695).babelrc and .eslintrc. (@fson in #689, @gaearon in #705)npm start doesn’t fail in a composed Docker container. (@arekkas in #711)eject are now cleaner. (@gaearon in #723)eslint-config-react-app)react/no-danger-with-children and react/style-prop-object rules. (@fson in #696)babel-preset-react-app)react-dev-utils)create-react-app)README to npm. There were no other changes.Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@0.5.0
If you used a global ESLint installation for the editor integration, you’ll need to install these versions of global ESLint packages.
index.html into public FolderYou’ll also need to create a new folder called public in the root of your project. Then, move index.html and files it references (such as a favicon) into that folder.
You can no longer reference any files from ./src in index.html. Instead, public/index.html can now only reference files other inside of the public folder using a special variable called %PUBLIC_URL%.
For example, instead of:
<link rel="shortcut icon" href="./src/favicon.ico">
You would need to move both index.html and src/favicon.ico into the public folder, and change <link> to look like this:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
This ensures it become a part of the build output, and resolves correctly both with client-side routing and non-root homepage in package.json. Read more about using the public folder and why these changes were made.
Lint output in editor is now opt-in because, due to this ESLint issue, it is broken by default in Atom. (@fson in #649)
react-scripts)jpeg, wav, mp3, m4a, aac, and oga. (@mareksuscak in #624, @danharper in #665)*.json.gzip files are no longer created in the project folder. (@thangngoc89 in #620)@ now works with tests. (@fson in #584)create-react-app)react-scripts to create-react-app with --scripts-version works again. (@yesmeck in #632)You may optionally update the global command (it’s not required):
npm install -g create-react-app@0.4.2
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@0.4.2
We now support (but don’t recommend) .jsx file extension. (@tizmagik in #563)
react-scripts).jsx file extension. (@tizmagik in #563)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@0.4.1
Breaking Change: Disabled implicit serving of source files in development. (@gaearon in #551)
react-scripts)NODE_PATH environment variable for absolute import paths. (@jimmyhmiller in #476)src/setupTests.js exists, it will be used to setup the test environment. (@gaelduplessix in #548)HTTPS environment variable is set to true, development server will run in HTTPS mode. (@dceddia in #552)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@0.4.0
Paths like /src/somefile.png used to be served in development, but only by accident. They never worked in production builds. Since 0.4.0, we don’t serve static files by default in development anymore either. This removes a dangerous inconsistency that we never intentionally supported.
If you need a static file to be part for the build, import it from JavaScript and you will get its filename. This ensures it gets included into the production build as well, and its filename contains the content hash.
If you used static files with <link href>, read this new guide on how to make sure these files get included into the builds. For example, you can replace <link href="/src/favicons/favicon-32.png"> with <link href="./src/favicons/favicon-32.png">, and then Webpack will recognize it and include it into the build.
If you referenced some other files from index.html, please file an issue to discuss your use case. In the meantime, you can serve them from a separate static server until your use case is supported.
Breaking Change: Local paths in in index.html will now be correctly resolved, so deleting favicon.ico is not an error anymore. (@andreypopp in #428)
react-scripts)src directory. (@fson in #504)<link href> in index.html will now be correctly resolved, so deleting favicon.ico is not an error anymore. (@andreypopp in #428)<div ref={node => this.node = node}>. (@mrscobbler in #529)react-constant-elements Babel transform because of its bugs. (@gaearon in #534)create-react-app).idea folder, which is necessary for future WebStorm integration. (@denofevil in #522)You may optionally update the global command (it’s not required):
npm install -g create-react-app@0.3.0
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@0.3.0
Now favicon.ico is not treated specially anymore.
If you use it, move it to src and add the following line to <head> in your HTML:
<link rel="shortcut icon" href="./src/favicon.ico">
Since 0.3.0 added a test runner, we recommend that you add it to the scripts section of your package.json like this:
// ...
"scripts": {
// ...
"test": "react-scripts test --env=jsdom"
}
Nothing published for this version
Nothing published for this version
Fixes an issue with npm start taking a very long time on OS X with Firewall enabled (@gaearon in #319)
react-scripts)npm start taking a very long time on OS X with Firewall enabled (@gaearon in #319)?v= after asset filenames, such as Font Awesome, now works correctly (@alexzherdev in #298)npm linking react-scripts have been fixed (@dallonf in #277)/static prefix for assets both in development and production (@gaearon in #278)Update react-scripts to point to 0.2.1 in your package.json and run npm install. You shouldn’t need to do anything else. If you see a warning about wrong file casing next time you npm start, fix your imports to use the correct filename casing.
Newly created projects will use 0.2.1 automatically. You don’t need to update the global create-react-app CLI itself. It stays at 0.2.0 for now because it doesn’t have any changes.
You can now enable deployment to GitHub Pages by adding homepage field to package.json (@dhruska in #94)
react-scripts)homepage field to package.json (@dhruska in #94)0.0.0.0 and works with VirtualBox (@JWo1F in #128)3000 port is taken, we offer to use another port (@chocnut in #101, 2edf21)import CSS files from npm modules (@glennreyes in #105, @breaddevil in #178)fetch and Promise polyfills are now always included (@gaearon in #235).gitignore (@npverni in #79, @chibicode in #112).babelrc in parent directory no longer causes an error (@alexzherdev in #236).json extension are now discovered (@gaearon in a11d6a)create-react-app)--version flag correctly (@mxstbr in #152)You may optionally update the global command (it’s not required):
npm install -g create-react-app@0.2.0
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact react-scripts@0.2.0
You may need to fix a few lint warnings about missing <img alt> tag, but everything else should work out of the box. If you intend to deploy your site to GitHub Pages, you may now add homepage field to package.json. If you had issues with integrating editor linter plugins, follow these new instructions.
Nothing published for this version
Nothing published for this version
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →