diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000000..7c05e921500 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +open_collective: create-react-app diff --git a/.prettierrc b/.prettierrc index b1f6bfff4bc..7a7fd85ee2a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,5 @@ { "arrowParens": "avoid", - "trailingComma": "es5", "singleQuote": true, "semi": true } diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c4b9f5372b..8d32f878ccc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,182 @@ +## 4.0.3 (2021-02-22) + +v4.0.3 is a maintenance release that includes minor bug fixes and dependency updates. + +#### :bug: Bug Fix + +- `react-scripts` + - [#10590](https://github.com/facebook/create-react-app/pull/10590) Upgrade eslint-webpack-plugin to fix opt-out flag ([@mrmckeb](https://github.com/mrmckeb)) + +#### :house: Internal + +- `react-dev-utils` + - [#10412](https://github.com/facebook/create-react-app/pull/10412) update immer to 8.0.1 to address vulnerability ([@wclem4](https://github.com/wclem4)) +- `create-react-app` + - [#10384](https://github.com/facebook/create-react-app/pull/10384) tests: update test case to match the description ([@jamesgeorge007](https://github.com/jamesgeorge007)) + +#### Committers: 4 + +- Brody McKee ([@mrmckeb](https://github.com/mrmckeb)) +- Dion Woolley ([@Awarua-](https://github.com/Awarua-)) +- James George ([@jamesgeorge007](https://github.com/jamesgeorge007)) +- Walker Clem ([@wclem4](https://github.com/wclem4)) + +# Migrating from 4.0.2 to 4.0.3 + +Inside any created project that has not been ejected, run: + +```bash +npm install --save --save-exact react-scripts@4.0.3 +``` + +or + +``` +yarn add --exact react-scripts@4.0.3 +``` + +## 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. + +#### :bug: Bug Fix + +- `react-scripts` + - [#9921](https://github.com/facebook/create-react-app/pull/9921) Fix noFallthroughCasesInSwitch/jsx object is not extensible ([@ryota-murakami](https://github.com/ryota-murakami)) + - [#9869](https://github.com/facebook/create-react-app/pull/9869) Fix react-jsx error ([@benneq](https://github.com/benneq)) + - [#9885](https://github.com/facebook/create-react-app/pull/9885) fix: `React is not defined` compilation error after ejected ([@n3tr](https://github.com/n3tr)) + - [#9911](https://github.com/facebook/create-react-app/pull/9911) fix: slow recompile time ([@FezVrasta](https://github.com/FezVrasta)) +- `react-dev-utils` + - [#9884](https://github.com/facebook/create-react-app/pull/9884) fix: page doesn't get refreshed when FAST_REFRESH=false ([@n3tr](https://github.com/n3tr)) + +#### :nail_care: Enhancement + +- `react-scripts` + - [#10048](https://github.com/facebook/create-react-app/pull/10048) Increase Workbox's maximumFileSizeToCacheInBytes ([@jeffposnick](https://github.com/jeffposnick)) + +#### :memo: Documentation + +- [#10052](https://github.com/facebook/create-react-app/pull/10052) docs: add React Testing Library as a library requiring jsdom ([@anyulled](https://github.com/anyulled)) + +#### :house: Internal + +- `create-react-app`, `react-dev-utils`, `react-scripts` + - [#10083](https://github.com/facebook/create-react-app/pull/10083) replace inquirer with prompts ([@EvanBacon](https://github.com/EvanBacon)) +- `cra-template-typescript`, `cra-template`, `react-scripts` + - [#9516](https://github.com/facebook/create-react-app/pull/9516) [ImgBot] Optimize images ([@MichaelDeBoey](https://github.com/MichaelDeBoey)) +- Other + - [#9860](https://github.com/facebook/create-react-app/pull/9860) chore: Update .prettierrc ([@MichaelDeBoey](https://github.com/MichaelDeBoey)) + +#### Committers: 9 + +- Anyul Rivas ([@anyulled](https://github.com/anyulled)) +- Ben M ([@benneq](https://github.com/benneq)) +- Evan Bacon ([@EvanBacon](https://github.com/EvanBacon)) +- Federico Zivolo ([@FezVrasta](https://github.com/FezVrasta)) +- Jeffrey Posnick ([@jeffposnick](https://github.com/jeffposnick)) +- Jirat Ki. ([@n3tr](https://github.com/n3tr)) +- Michaël De Boey ([@MichaelDeBoey](https://github.com/MichaelDeBoey)) +- Ryota Murakami ([@ryota-murakami](https://github.com/ryota-murakami)) +- sho90 ([@sho-t](https://github.com/sho-t)) + +# Migrating from 4.0.0 to 4.0.1 + +Inside any created project that has not been ejected, run: + +```bash +npm install --save --save-exact react-scripts@4.0.1 +``` + +or + +``` +yarn add --exact react-scripts@4.0.1 +``` + ## 4.0.0 (2020-10-23) Create React App 4.0 is a major release with several new features, including support for Fast Refresh! diff --git a/README.md b/README.md index f1d0fa5ce59..f688165eb0f 100644 --- a/README.md +++ b/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). +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/). diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 7f0189c6fc2..336d28cb2a2 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/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]() 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. | diff --git a/docusaurus/docs/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 398ff94696a..1261976343f 100644 --- a/docusaurus/docs/debugging-tests.md +++ b/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` diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index ccc3fecd9a1..4090a1fcd6f 100644 --- a/docusaurus/docs/running-tests.md +++ b/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) @@ -321,6 +324,7 @@ To help you make up your mind, here is a list of APIs that **need jsdom**: - [`ReactDOM.render()`](https://facebook.github.io/react/docs/top-level-api.html#reactdom.render) - [`TestUtils.renderIntoDocument()`](https://facebook.github.io/react/docs/test-utils.html#renderintodocument) ([a shortcut](https://github.com/facebook/react/blob/34761cf9a252964abfaab6faf74d473ad95d1f21/src/test/ReactTestUtils.js#L83-L91) for the above) - [`mount()`](https://airbnb.io/enzyme/docs/api/mount.html) in [Enzyme](https://airbnb.io/enzyme/index.html) +- [`render()`](https://testing-library.com/docs/react-testing-library/api/#render) in [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) In contrast, **jsdom is not needed** for the following APIs: diff --git a/docusaurus/docs/using-the-public-folder.md b/docusaurus/docs/using-the-public-folder.md index b2b6874346e..71266db6f81 100644 --- a/docusaurus/docs/using-the-public-folder.md +++ b/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 `