Upgrading react-scripts 2 to 3
Breaking2.1.8 → 3.4.4Breaking22Security4Platform1Deprecated2New39Changed87Fixed53Other144
SecurityBumps resolve-url-loader to a version for which npm audit does not report a vulnerability.Advisory ↗
BreakingUpgrade verdict
21 breaking changes and a platform requirement change and 4 security fixes.
In plain terms
- The no-unexpected-multiline lint rule is no longer on by default; you can turn it back on in your ESLint config.
- The old way to turn off watching is gone; use the testing tool's own option instead.
- The test watcher option no longer accepts the old no-watch flag; use watchAll=false instead.
- The webpack-dev-server update only affects you if you use react-dev-utils outside of Create React App.
Must act Top 5 of 28 that need code or config changes
Adds @typescript-eslint/eslint-plugin ^2.10.0, @typescript-eslint/parser ^2.10.0, camelcase ^5.3.1, eslint-plugin-react-hooks ^1.6.1, jest-environment-jsdom-fourteen 1.0.1, postcss-normalize 8.0.1, resolve-url-loader 3.1.2, semver 6.3.0, ts-pnp 1.1.6.
Drops babel-core, bfj, jest-pnp-resolver.
Installs 1651 packages in all (was 1975).
What you must change
Breaking21
Removes the no-unexpected-multiline ESLint rule because it is not compatible with Prettier.
no-unexpected-multilinereact-appRemoves the --no-watch flag from the start script in favor of Jest's --watchAll=false.
--no-watch--watchAll=falseRemoves the no-watch flag in favor of watchAll=false.
no-watchwatchAllBumps webpack-dev-server, which is only breaking if react-dev-utils is used outside Create React App.
webpack-dev-serverreact-dev-utilsFixes the RegExp from navigateFallbackBlacklist (workbox) in react-scripts.
navigateFallbackBlacklistUpdates url-loader to 2.0.1 in react-scripts.
url-loaderAdds ESLint 6 support, a breaking change for eslint-config-react-app, react-error-overlay and react-scripts.
eslint-config-react-appreact-error-overlayreact-scriptsUpdates dependencies of the Babel preset with recent changes.
babel-preset-react-appEnforces Rules of Hooks with eslint-plugin-react-hooks, failing the build when rules are broken.
eslint-plugin-react-hooksLints TypeScript files, which can fail builds for projects not compatible with the enforced rules.
Uses the browserslist config in package.json to control JavaScript output, with separate development and production settings.
browserslistMoves all asset paths under the files key in asset-manifest.json.
asset-manifest.jsonfilesAdds a custom function to generate the asset manifest.
Makes NODE_ENV and PUBLIC_URL readonly.
NODE_ENVPUBLIC_URLRemoves the --coverage + --watch workaround for the test command.
--coverage--watchAllows .json type checking.
Updates babel-preset-react-app and react-app-polyfill to core-js@3.
core-jsUpdates babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay and react-scripts to Jest 24.
JestAdds TypeScript linting support to eslint-config-react-app and react-scripts.
Adds React Hooks support to babel-preset-react-app, eslint-config-react-app and react-scripts.
Adds browserslist support in @babel/preset-env for babel-preset-react-app, react-dev-utils and react-scripts.
@babel/preset-envbrowserslistSecurity4
Bumps resolve-url-loader to a version for which npm audit does not report a vulnerability.
resolve-url-loaderBumps terser-webpack-plugin to a version not flagged by npm audit, though the vulnerability did not affect Create React App projects.
terser-webpack-pluginBumps webpack-dev-server to a version that npm audit no longer reports as vulnerable, though the vulnerability did not affect Create React App projects.
webpack-dev-serverUpdates the terser webpack plugin in react-error-overlay and react-scripts.
terser-webpack-pluginreact-error-overlayreact-scriptsPlatform1
Adds a TypeScript peer dependency to react-scripts.
react-scriptsDeprecations to plan for
Deprecated2
Notes that setupTestFrameworkScriptFile is deprecated.
setupTestFrameworkScriptFileDeprecates --typescript in favour of --template typescript for TypeScript users.
--typescript--templateAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- changed:
const classes: { [key: string]: string } → const classes: { readonly [key: string]: string }
- changed:
const classes: { [key: string]: string } → const classes: { readonly [key: string]: string }
- changed:
const classes: { [key: string]: string } → const classes: { readonly [key: string]: string }
- changed:
const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>> → const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>
- changed:
property NodeJS.ProcessEnv.NODE_ENV: 'development' | 'production' | 'test' → readonly property NodeJS.ProcessEnv.NODE_ENV: 'development' | 'production' | 'test' - changed:
property NodeJS.ProcessEnv.PUBLIC_URL: string → readonly property NodeJS.ProcessEnv.PUBLIC_URL: string