CHANGELOG.md

@@ -1,3 +1,87 @@
+## 4.0.2 (2021-02-03)
+
+v4.0.2 is a maintenance release that includes minor bug fixes and documentation updates.
+
+#### :rocket: New Feature
+
+- `react-scripts`
+  - [#8986](https://github.com/facebook/create-react-app/pull/8986) Add support for new BUILD_PATH advanced configuration variable ([@ajhyndman](https://github.com/ajhyndman))
+
+#### :bug: Bug Fix
+
+- `react-scripts`
+  - [#10170](https://github.com/facebook/create-react-app/pull/10170) Add opt-out for eslint-webpack-plugin ([@mrmckeb](https://github.com/mrmckeb))
+  - [#9872](https://github.com/facebook/create-react-app/pull/9872) fix(react-scripts): add missing peer dependency react and update react-refresh-webpack-plugin ([@merceyz](https://github.com/merceyz))
+  - [#9964](https://github.com/facebook/create-react-app/pull/9964) Add TypeScript 4.x as peerDependency to react-scripts ([@sheepsteak](https://github.com/sheepsteak))
+
+#### :nail_care: Enhancement
+
+- `react-scripts`
+  - [#9977](https://github.com/facebook/create-react-app/pull/9977) Move ESLint cache file into node_modules ([@ehsankhfr](https://github.com/ehsankhfr))
+  - [#9569](https://github.com/facebook/create-react-app/pull/9569) Improve vendor chunk names in development ([@jrr](https://github.com/jrr))
+
+#### :memo: Documentation
+
+- [#9473](https://github.com/facebook/create-react-app/pull/9473) docs: add missing override options for Jest config ([@tobiasbueschel](https://github.com/tobiasbueschel))
+- [#10314](https://github.com/facebook/create-react-app/pull/10314) Update using-the-public-folder.md ([@Avivhdr](https://github.com/Avivhdr))
+- [#10214](https://github.com/facebook/create-react-app/pull/10214) Remove references to Node 8 ([@ianschmitz](https://github.com/ianschmitz))
+
+#### :house: Internal
+
+- `react-scripts`
+  - [#10027](https://github.com/facebook/create-react-app/pull/10027) appTsConfig immutability handling by immer ([@josezone](https://github.com/josezone))
+- `create-react-app`
+  - [#10217](https://github.com/facebook/create-react-app/pull/10217) Fix CI tests ([@ianschmitz](https://github.com/ianschmitz))
+- `react-dev-utils`, `react-error-overlay`, `react-scripts`
+  - [#10091](https://github.com/facebook/create-react-app/pull/10091) Recovered some integration tests ([@maxsbelt](https://github.com/maxsbelt))
+
+#### :hammer: Underlying Tools
+
+- `react-scripts`
+  - [#10216](https://github.com/facebook/create-react-app/pull/10216) Revert "Update postcss packages" ([@ianschmitz](https://github.com/ianschmitz))
+  - [#9988](https://github.com/facebook/create-react-app/pull/9988) Upgrade sass-loader ([@ehsankhfr](https://github.com/ehsankhfr))
+  - [#10003](https://github.com/facebook/create-react-app/pull/10003) Update postcss packages ([@raix](https://github.com/raix))
+  - [#10213](https://github.com/facebook/create-react-app/pull/10213) Upgrade @svgr/webpack to fix build error ([@jabranr](https://github.com/jabranr))
+- `react-dev-utils`
+  - [#10198](https://github.com/facebook/create-react-app/pull/10198) remove chalk from formatWebpackMessages ([@jasonwilliams](https://github.com/jasonwilliams))
+- `cra-template-typescript`
+  - [#10141](https://github.com/facebook/create-react-app/pull/10141) chore: bump typescript version ([@trainto](https://github.com/trainto))
+- `cra-template-typescript`, `cra-template`
+  - [#10143](https://github.com/facebook/create-react-app/pull/10143) chore: bump web-vital dependency version ([@sahilpurav](https://github.com/sahilpurav))
+
+#### Committers: 15
+
+- Andrew Hyndman ([@ajhyndman](https://github.com/ajhyndman))
+- Aviv Hadar ([@Avivhdr](https://github.com/Avivhdr))
+- Brody McKee ([@mrmckeb](https://github.com/mrmckeb))
+- Chris Shepherd ([@sheepsteak](https://github.com/sheepsteak))
+- EhsanKhaki ([@ehsankhfr](https://github.com/ehsankhfr))
+- Hakjoon Sim ([@trainto](https://github.com/trainto))
+- Ian Schmitz ([@ianschmitz](https://github.com/ianschmitz))
+- Jabran Rafique⚡️ ([@jabranr](https://github.com/jabranr))
+- Jason Williams ([@jasonwilliams](https://github.com/jasonwilliams))
+- John Ruble ([@jrr](https://github.com/jrr))
+- Kristoffer K. ([@merceyz](https://github.com/merceyz))
+- Morten N.O. Nørgaard Henriksen ([@raix](https://github.com/raix))
+- Sahil Purav ([@sahilpurav](https://github.com/sahilpurav))
+- Sergey Makarov ([@maxsbelt](https://github.com/maxsbelt))
+- Tobias Büschel ([@tobiasbueschel](https://github.com/tobiasbueschel))
+- mad-jose ([@josezone](https://github.com/josezone))
+
+# Migrating from 4.0.1 to 4.0.2
+
+Inside any created project that has not been ejected, run:
+
+```bash
+npm install --save --save-exact react-scripts@4.0.2
+```
+
+or
+
+```
+yarn add --exact react-scripts@4.0.2
+```
+
 ## 4.0.1 (2020-11-23)
 
 v4.0.1 is a maintenance release that includes minor bug fixes and documentation updates.

README.md

@@ -39,7 +39,7 @@ Create a project, and you’re good to go.
 
 ## Creating an App
 
-**You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
+**You’ll need to have Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). We recommend using the latest LTS version. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
 
 To create a new app, you may choose one of the following methods:
 
@@ -217,4 +217,4 @@ We are grateful to the authors of existing related projects for their ideas and
 
 ## License
 
-Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). The Create React App logo is licensed  under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/).
+Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). The Create React App logo is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/).

docusaurus/docs/advanced-configuration.md

@@ -18,6 +18,7 @@ You can adjust various development and production settings by setting environmen
 | WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
 | WDS_SOCKET_PORT           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details.                                                                                                                                                                                                                          |
 | PUBLIC_URL                |   ✅ Used   |  ✅ Used   | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.                                                                                                                                                                                                                                     |
+| BUILD_PATH                | 🚫 Ignored  |  ✅ Used   | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project.                                                                                                                                                                                                                                                                                                                                                                                          |
 | CI                        |   ✅ Used   |  ✅ Used   | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | REACT_EDITOR              |   ✅ Used   | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](<https://en.wikipedia.org/wiki/PATH_(variable)>) environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. |
 | CHOKIDAR_USEPOLLING       |   ✅ Used   | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
@@ -26,4 +27,6 @@ You can adjust various development and production settings by setting environmen
 | IMAGE_INLINE_SIZE_LIMIT   | 🚫 Ignored  |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | FAST_REFRESH              |   ✅ Used   | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | TSC_COMPILE_ON_ERROR      |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ESLINT_NO_DEV_ERRORS      |   ✅ Used   | 🚫 Ignored | When set to `true`, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| DISABLE_ESLINT_PLUGIN     |   ✅ Used   |  ✅ Used   | When set to `true`, [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) will be completely disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | DISABLE_NEW_JSX_TRANSFORM |   ✅ Used   |  ✅ Used   | When set to `true`, disables the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) introduced in React 17 and backported to React 16.14.0, 15.7.0, and 0.14.10. New projects will use a version of React that supports this by default but you may need to disable it in existing projects if you can't upgrade React.                                                                                                                                                                                                                                                                                                     |

docusaurus/docs/debugging-tests.md

@@ -6,8 +6,6 @@ sidebar_label: Debugging Tests
 
 There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and [Visual Studio Code](https://code.visualstudio.com/).
 
-> Note: debugging tests requires Node 8 or higher.
-
 ## Debugging Tests in Chrome
 
 Add the following to the `scripts` section in your project's `package.json`

docusaurus/docs/running-tests.md

@@ -184,12 +184,13 @@ Note that tests run much slower with coverage so it is recommended to run it sep
 
 ### Configuration
 
-The default Jest coverage configuration can be overridden by adding any of the following supported keys to a Jest config in your package.json.
+The [default configuration](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/utils/createJestConfig.js) that Create React App uses for Jest can be overridden by adding any of the following supported keys to a Jest config in your package.json.
 
 Supported overrides:
 
 - [`clearMocks`](https://jestjs.io/docs/en/configuration.html#clearmocks-boolean)
 - [`collectCoverageFrom`](https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array)
+- [`coveragePathIgnorePatterns`](https://jestjs.io/docs/en/configuration#coveragepathignorepatterns-arraystring)
 - [`coverageReporters`](https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string)
 - [`coverageThreshold`](https://jestjs.io/docs/en/configuration.html#coveragethreshold-object)
 - [`displayName`](https://jestjs.io/docs/en/configuration.html#displayname-string-object)
@@ -199,7 +200,9 @@ Supported overrides:
 - [`moduleNameMapper`](https://jestjs.io/docs/en/configuration.html#modulenamemapper-object-string-string)
 - [`resetMocks`](https://jestjs.io/docs/en/configuration.html#resetmocks-boolean)
 - [`resetModules`](https://jestjs.io/docs/en/configuration.html#resetmodules-boolean)
+- [`restoreMocks`](https://jestjs.io/docs/en/configuration#restoremocks-boolean)
 - [`snapshotSerializers`](https://jestjs.io/docs/en/configuration.html#snapshotserializers-array-string)
+- [`testMatch`](https://jestjs.io/docs/en/configuration#testmatch-arraystring)
 - [`transform`](https://jestjs.io/docs/en/configuration.html#transform-object-string-pathtotransformer-pathtotransformer-object)
 - [`transformIgnorePatterns`](https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string)
 - [`watchPathIgnorePatterns`](https://jestjs.io/docs/en/configuration.html#watchpathignorepatterns-array-string)

docusaurus/docs/using-the-public-folder.md

@@ -61,6 +61,6 @@ The `public` folder is useful as a workaround for a number of less common cases:
 - You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
 - You have thousands of images and need to dynamically reference their paths.
 - You want to include a small script like [`pace.js`](https://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
-- Some library may be incompatible with webpack and you have no other option but to include it as a `<script>` tag.
+- Some libraries may be incompatible with webpack and you have no other option but to include it as a `<script>` tag.
 
 Note that if you add a `<script>` that declares global variables, you should read the topic [Using Global Variables](using-global-variables.md) in the next section which explains how to reference them.

package.json

@@ -42,7 +42,7 @@
     "svg-term-cli": "^2.1.1",
     "tempy": "^0.2.1",
     "wait-for-localhost": "^3.3.0",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^1.0.1"
   },
   "husky": {
     "hooks": {

packages/cra-template-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cra-template-typescript",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "keywords": [
     "react",
     "create-react-app",

packages/cra-template-typescript/template.json

@@ -5,11 +5,11 @@
       "@testing-library/react": "^11.1.0",
       "@testing-library/user-event": "^12.1.10",
       "@types/node": "^12.0.0",
-      "@types/react": "^16.9.53",
-      "@types/react-dom": "^16.9.8",
+      "@types/react": "^17.0.0",
+      "@types/react-dom": "^17.0.0",
       "@types/jest": "^26.0.15",
-      "typescript": "^4.0.3",
-      "web-vitals": "^0.2.4"
+      "typescript": "^4.1.2",
+      "web-vitals": "^1.0.1"
     },
     "eslintConfig": {
       "extends": ["react-app", "react-app/jest"]

packages/cra-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cra-template",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "keywords": [
     "react",
     "create-react-app",

packages/cra-template/template.json

@@ -4,7 +4,7 @@
       "@testing-library/jest-dom": "^5.11.4",
       "@testing-library/react": "^11.1.0",
       "@testing-library/user-event": "^12.1.10",
-      "web-vitals": "^0.2.4"
+      "web-vitals": "^1.0.1"
     },
     "eslintConfig": {
       "extends": ["react-app", "react-app/jest"]

packages/create-react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-app",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "keywords": [
     "react"
   ],

packages/react-dev-utils/eslintFormatter.js

@@ -14,6 +14,10 @@ const table = require('text-table');
 
 const cwd = process.cwd();
 
+const emitErrorsAsWarnings =
+  process.env.NODE_ENV === 'development' &&
+  process.env.ESLINT_NO_DEV_ERRORS === 'true';
+
 function isError(message) {
   if (message.fatal || message.severity === 2) {
     return true;
@@ -38,7 +42,7 @@ function formatter(results) {
 
     messages = messages.map(message => {
       let messageType;
-      if (isError(message)) {
+      if (isError(message) && !emitErrorsAsWarnings) {
         messageType = 'error';
         hasErrors = true;
         if (message.ruleId) {

packages/react-dev-utils/formatWebpackMessages.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-const chalk = require('chalk');
 const friendlySyntaxErrorLabel = 'Syntax error:';
 
 function isLikelyASyntaxError(message) {
@@ -80,8 +79,6 @@ function formatMessage(message) {
       'Run `npm install node-sass` or `yarn add node-sass` inside your workspace.';
   }
 
-  lines[0] = chalk.inverse(lines[0]);
-
   message = lines.join('\n');
   // Internal stacks are generally useless so we strip them... with the
   // exception of stacks containing `webpack:` because they're normally

packages/react-dev-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dev-utils",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "description": "webpack utilities used by Create React App",
   "repository": {
     "type": "git",
@@ -71,15 +71,15 @@
     "open": "^7.0.2",
     "pkg-up": "3.1.0",
     "prompts": "2.4.0",
-    "react-error-overlay": "^6.0.8",
+    "react-error-overlay": "^6.0.9",
     "recursive-readdir": "2.2.2",
     "shell-quote": "1.7.2",
     "strip-ansi": "6.0.0",
     "text-table": "0.2.0"
   },
   "devDependencies": {
     "cross-env": "^7.0.2",
-    "jest": "26.4.2"
+    "jest": "26.6.0"
   },
   "scripts": {
     "test": "cross-env FORCE_COLOR=true jest"

packages/react-error-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-error-overlay",
-  "version": "6.0.8",
+  "version": "6.0.9",
   "description": "An overlay for displaying stack frames.",
   "main": "lib/index.js",
   "sideEffects": false,

packages/react-error-overlay/src/__tests__/extract-source-map.js

@@ -16,15 +16,15 @@ test('extracts last source map directive', async () => {
 });
 
 test('errors when no source map', async () => {
-  expect.assertions(1);
-
   const testFileName = 'test.js';
+  let error;
   try {
     await extractSourceMapUrl(
       testFileName,
       `console.log('hi')\n\nconsole.log('bye')`
     );
   } catch (e) {
-    expect(e).toBe(`Cannot find a source map directive for ${testFileName}.`);
+    error = e;
   }
+  expect(error).toBe(`Cannot find a source map directive for ${testFileName}.`);
 });

packages/react-error-overlay/src/__tests__/get-source-map.js

@@ -52,12 +52,14 @@ test('error on a source map with unsupported encoding', async () => {
   const file = fs
     .readFileSync(resolve(__dirname, '../../fixtures/junk-inline.mjs'))
     .toString('utf8');
+  let error;
   try {
     await getSourceMap('/', file);
   } catch (e) {
-    expect(e instanceof Error).toBe(true);
-    expect(e.message).toBe(
-      'Sorry, non-base64 inline source-map encoding is not supported.'
-    );
+    error = e;
   }
+  expect(error instanceof Error).toBe(true);
+  expect(error.message).toBe(
+    'Sorry, non-base64 inline source-map encoding is not supported.'
+  );
 });

packages/react-error-overlay/src/__tests__/parser/generic.js

@@ -8,23 +8,25 @@
 import { parse } from '../../utils/parser';
 
 test('throws on null', () => {
-  expect.assertions(2);
+  let error;
   try {
     parse(null);
   } catch (e) {
-    expect(e instanceof Error).toBe(true);
-    expect(e.message).toBe('You cannot pass a null object.');
+    error = e;
   }
+  expect(error instanceof Error).toBe(true);
+  expect(error.message).toBe('You cannot pass a null object.');
 });
 
 test('throws on unparsable', () => {
-  expect.assertions(2);
+  let error;
   try {
     parse({});
   } catch (e) {
-    expect(e instanceof Error).toBe(true);
-    expect(e.message).toBe(
-      'The error you provided does not contain a stack trace.'
-    );
+    error = e;
   }
+  expect(error instanceof Error).toBe(true);
+  expect(error.message).toBe(
+    'The error you provided does not contain a stack trace.'
+  );
 });

packages/react-scripts/config/jest/babelTransform.js

@@ -1,10 +1,11 @@
-// @remove-file-on-eject
+// @remove-on-eject-begin
 /**
  * Copyright (c) 2014-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @remove-on-eject-end
 'use strict';
 
 const babelJest = require('babel-jest');

packages/react-scripts/config/paths.js

@@ -29,6 +29,8 @@ const publicUrlOrPath = getPublicUrlOrPath(
   process.env.PUBLIC_URL
 );
 
+const buildPath = process.env.BUILD_PATH || 'build';
+
 const moduleFileExtensions = [
   'web.mjs',
   'mjs',
@@ -60,7 +62,7 @@ const resolveModule = (resolveFn, filePath) => {
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
+  appBuild: resolveApp(buildPath),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -83,7 +85,7 @@ const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
+  appBuild: resolveApp(buildPath),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -119,7 +121,7 @@ if (
   module.exports = {
     dotenv: resolveOwn(`${templatePath}/.env`),
     appPath: resolveApp('.'),
-    appBuild: resolveOwn('../../build'),
+    appBuild: resolveOwn(path.join('../..', buildPath)),
     appPublic: resolveOwn(`${templatePath}/public`),
     appHtml: resolveOwn(`${templatePath}/public/index.html`),
     appIndexJs: resolveModule(resolveOwn, `${templatePath}/src/index`),

packages/react-scripts/config/webpack.config.js

@@ -55,6 +55,9 @@ const reactRefreshOverlayEntry = require.resolve(
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
+const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -305,7 +308,7 @@ module.exports = function (webpackEnv) {
       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
       splitChunks: {
         chunks: 'all',
-        name: false,
+        name: isEnvDevelopment,
       },
       // Keep the runtime chunk separated to enable long term caching
       // https://twitter.com/wSokra/status/969679223278505985
@@ -750,25 +753,31 @@ module.exports = function (webpackEnv) {
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
-      new ESLintPlugin({
-        // Plugin options
-        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
-        formatter: require.resolve('react-dev-utils/eslintFormatter'),
-        eslintPath: require.resolve('eslint'),
-        context: paths.appSrc,
-        cache: true,
-        // ESLint class options
-        cwd: paths.appPath,
-        resolvePluginsRelativeTo: __dirname,
-        baseConfig: {
-          extends: [require.resolve('eslint-config-react-app/base')],
-          rules: {
-            ...(!hasJsxRuntime && {
-              'react/react-in-jsx-scope': 'error',
-            }),
+      !disableESLintPlugin &&
+        new ESLintPlugin({
+          // Plugin options
+          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+          formatter: require.resolve('react-dev-utils/eslintFormatter'),
+          eslintPath: require.resolve('eslint'),
+          emitWarning: isEnvDevelopment && emitErrorsAsWarnings,
+          context: paths.appSrc,
+          cache: true,
+          cacheLocation: path.resolve(
+            paths.appNodeModules,
+            '.cache/.eslintcache'
+          ),
+          // ESLint class options
+          cwd: paths.appPath,
+          resolvePluginsRelativeTo: __dirname,
+          baseConfig: {
+            extends: [require.resolve('eslint-config-react-app/base')],
+            rules: {
+              ...(!hasJsxRuntime && {
+                'react/react-in-jsx-scope': 'error',
+              }),
+            },
           },
-        },
-      }),
+        }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell webpack to provide empty mocks for them so importing them works.

packages/react-scripts/fixtures/kitchensink/template.json

@@ -2,7 +2,7 @@
   "package": {
     "dependencies": {
       "bootstrap": "4.3.1",
-      "jest": "26.4.2",
+      "jest": "26.6.0",
       "node-sass": "4.x",
       "normalize.css": "7.0.0",
       "prop-types": "15.7.2",

packages/react-scripts/fixtures/kitchensink/template/integration/webpack.test.js

@@ -86,7 +86,7 @@ describe('Integration', () => {
       doc = await initDOM('image-inclusion');
 
       expect(doc.getElementById('feature-image-inclusion').src).toMatch(
-        /^data:image\/jpeg;base64.+==$/
+        /^data:image\/jpeg;base64.+=$/
       );
     });
 

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scripts",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Configuration and scripts for Create React App.",
   "repository": {
     "type": "git",
@@ -29,8 +29,8 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.12.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
-    "@svgr/webpack": "5.4.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
+    "@svgr/webpack": "5.5.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "babel-eslint": "^10.1.0",
@@ -72,11 +72,11 @@
     "postcss-safe-parser": "5.0.2",
     "prompts": "2.4.0",
     "react-app-polyfill": "^2.0.0",
-    "react-dev-utils": "^11.0.1",
+    "react-dev-utils": "^11.0.2",
     "react-refresh": "^0.8.3",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
-    "sass-loader": "8.0.2",
+    "sass-loader": "^10.0.5",
     "semver": "7.3.2",
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
@@ -95,7 +95,8 @@
     "fsevents": "^2.1.3"
   },
   "peerDependencies": {
-    "typescript": "^3.2.1"
+    "react": ">= 16",
+    "typescript": "^3.2.1 || ^4"
   },
   "peerDependenciesMeta": {
     "typescript": {

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -41,9 +41,9 @@ module.exports = (resolve, rootDir, isEjecting) => {
     testEnvironment: 'jsdom',
     testRunner: require.resolve('jest-circus/runner'),
     transform: {
-      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': isEjecting
-        ? '<rootDir>/node_modules/babel-jest'
-        : resolve('config/jest/babelTransform.js'),
+      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': resolve(
+        'config/jest/babelTransform.js'
+      ),
       '^.+\\.css$': resolve('config/jest/cssTransform.js'),
       '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': resolve(
         'config/jest/fileTransform.js'

packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

@@ -218,15 +218,7 @@ function verifyTypeScriptSetup() {
   if (appTsConfig.compilerOptions == null) {
     appTsConfig.compilerOptions = {};
     firstTimeSetup = true;
-  } else {
-    // This is bug fix code of https://github.com/facebook/create-react-app/issues/9868
-    // Bellow code release variable from non-extensible and freeze status.
-    appTsConfig.compilerOptions = JSON.parse(JSON.stringify(appTsConfig.compilerOptions));
-
-    // Original appTsConfig.compilerOptions status
-    // Object.isExtensible(appTsConfig.compilerOptions) output: false
-    // Object.isFrozen(appTsConfig.compilerOptions) output: true
-  }
+  } 
 
   for (const option of Object.keys(compilerOptions)) {
     const { parsedValue, value, suggested, reason } = compilerOptions[option];
@@ -236,15 +228,19 @@ function verifyTypeScriptSetup() {
 
     if (suggested != null) {
       if (parsedCompilerOptions[option] === undefined) {
-        appTsConfig.compilerOptions[option] = suggested;
+        appTsConfig = immer(appTsConfig, config => {
+          config.compilerOptions[option] = suggested;
+        });
         messages.push(
           `${coloredOption} to be ${chalk.bold(
             'suggested'
           )} value: ${chalk.cyan.bold(suggested)} (this can be changed)`
         );
       }
     } else if (parsedCompilerOptions[option] !== valueToCheck) {
-      appTsConfig.compilerOptions[option] = value;
+      appTsConfig = immer(appTsConfig, config => {
+        config.compilerOptions[option] = value;
+      });
       messages.push(
         `${coloredOption} ${chalk.bold(
           valueToCheck == null ? 'must not' : 'must'
@@ -256,7 +252,9 @@ function verifyTypeScriptSetup() {
 
   // tsconfig will have the merged "include" and "exclude" by this point
   if (parsedTsConfig.include == null) {
-    appTsConfig.include = ['src'];
+    appTsConfig = immer(appTsConfig, config => {
+      config.include = ['src'];
+    });
     messages.push(
       `${chalk.cyan('include')} should be ${chalk.cyan.bold('src')}`
     );

tasks/e2e-simple.sh

@@ -259,6 +259,10 @@ verify_module_scope
 # Eject...
 echo yes | npm run eject
 
+# Temporary workaround for https://github.com/facebook/create-react-app/issues/6099
+rm yarn.lock
+yarn add @babel/plugin-transform-react-jsx-source @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self
+
 # Test ejected files were staged
 test -n "$(git diff --staged --name-only)"