this.node = node}>`. ([@mrscobbler](https://github.com/mrscobbler) in [#529](https://github.com/facebook/create-react-app/pull/529))
+- Temporarily disabled `react-constant-elements` Babel transform because of its bugs. ([@gaearon](https://github.com/gaearon) in [#534](https://github.com/facebook/create-react-app/pull/534))
+- Fixed a permission issue with Docker. ([@gaearon](https://github.com/gaearon) in [73c940](https://github.com/facebook/create-react-app/commit/73c940a73205d761230f8d6bf81ecfd460ba28a9))
+- Fixed an issue with generator syntax in Jest that occurred in an alpha release. ([@gaearon](https://github.com/gaearon) in [#535](https://github.com/facebook/create-react-app/pull/535))
### Global CLI (`create-react-app`)
-* You can now create a project in a folder that already contains an `.idea` folder, which is necessary for future WebStorm integration. ([@denofevil](https://github.com/denofevil) in [#522](https://github.com/facebook/create-react-app/pull/522))
+- You can now create a project in a folder that already contains an `.idea` folder, which is necessary for future WebStorm integration. ([@denofevil](https://github.com/denofevil) in [#522](https://github.com/facebook/create-react-app/pull/522))
### Migrating from 0.2.3 to 0.3.0
@@ -1255,7 +1316,7 @@ Now `favicon.ico` is not treated specially anymore.
If you use it, move it to `src` and add the following line to `` in your HTML: ```html - + ``` #### New Feature @@ -1276,13 +1337,13 @@ Since 0.3.0 added a test runner, we recommend that you add it to the `scripts` s ### Build Dependency (`react-scripts`) -* You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) -* You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) -* You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) -* Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) -* Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) -* The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) -* Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) +- You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) +- You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) +- You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) +- Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) +- Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) +- The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) +- Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) ### Migrating from 0.2.2 to 0.2.3 @@ -1294,15 +1355,15 @@ Newly created projects will use `0.2.3` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) -* `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) -* Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) -* All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) -* `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) -* [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) -* Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) -* The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) -* The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) +- When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) +- `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) +- Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) +- All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) +- `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) +- [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) +- Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) +- The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) +- The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) ### Migrating from 0.2.1 to 0.2.2 @@ -1314,12 +1375,12 @@ Newly created projects will use `0.2.2` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) -* Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) -* We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) -* CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) -* Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) -* We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) +- Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) +- Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) +- We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) +- CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) +- Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) +- We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) ### Migrating from 0.2.0 to 0.2.1 @@ -1331,27 +1392,27 @@ Newly created projects will use `0.2.1` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) -* Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) -* Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) -* When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) -* You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) -* `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) -* Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) -* Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) -* ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) -* A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) -* A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) -* A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) -* Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) -* Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) -* Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) -* After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) +- You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) +- Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) +- Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) +- When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) +- You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) +- `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) +- Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) +- Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) +- ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) +- A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) +- A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) +- A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) +- Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) +- Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) +- Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) +- After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) ### Global CLI (`create-react-app`) -* It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) -* It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) +- It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) +- It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) ### Migrating from 0.1.0 to 0.2.0 @@ -1371,4 +1432,4 @@ You may need to fix a few lint warnings about missing `![]()
` tag, but every
## 0.1.0 (July 22, 2016)
-* Initial public release
+- Initial public release
diff --git a/README.md b/README.md
index 55e8b891f20..d2052385efa 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Create React apps with no build configuration.
Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new).
-If you have questions or need help, please ask in our [Spectrum](https://spectrum.chat/create-react-app) community. +If you have questions or need help, please ask in [GitHub Discussions](https://github.com/facebook/create-react-app/discussions). ## Quick Overview @@ -17,7 +17,7 @@ cd my-app npm start ``` -If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that npx always uses the latest version. +If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that npx always uses the latest version. _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ diff --git a/azure-pipelines-test-job.yml b/azure-pipelines-test-job.yml index 7073bf3eab6..e035e141c91 100644 --- a/azure-pipelines-test-job.yml +++ b/azure-pipelines-test-job.yml @@ -6,10 +6,8 @@ parameters: name: '' testScript: '' configurations: - LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x } LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } jobs: - job: ${{ parameters.name }} diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 8021fb92668..3b7d9669e57 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -12,8 +12,6 @@ variables: NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache # Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory. VSTS_OVERWRITE_TEMP: True - # Override Verdaccio package to use. This is temporary and is needed to avoid socket timeouts on hosted Windows agent (on Azure). This also changes Verdaccio to return a 503 (service unavailable) instead of a 404 (not found) when the connection to the uplink timesout. - VERDACCIO_PACKAGE: https://github.com/willsmythe/verdaccio/releases/download/create-react-app/verdaccio-4.0.0-alpha.8.tgz CRA_INTERNAL_TEST: true # ****************************************************************************** @@ -57,36 +55,23 @@ jobs: name: Behavior testScript: tasks/e2e-behavior.sh configurations: - LinuxNode8: { vmImage: 'ubuntu-18.04', nodeVersion: 8.x } - LinuxNode10: { vmImage: 'ubuntu-18.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } - MacNode8: { vmImage: 'macOS-10.15', nodeVersion: 8.x } + LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } + WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x } + WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x } MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x } + MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x } # ****************************************************************************** # Old Node test suite # ****************************************************************************** - job: OldNode pool: - vmImage: ubuntu-16.04 + vmImage: ubuntu-latest steps: - task: NodeTool@0 inputs: - versionSpec: 6.x - displayName: 'Install Node.js 6.x' + versionSpec: 8.x + displayName: 'Install Node.js 8.x' - bash: tasks/e2e-old-node.sh displayName: 'Run tests' - # ****************************************************************************** - # Unsupported Node with TypeScript flag - # ****************************************************************************** - - job: UnsupportedNodeWithTypeScript - pool: - vmImage: ubuntu-16.04 - steps: - - task: NodeTool@0 - inputs: - versionSpec: 8.9.x - displayName: 'Install Node.js 8.9.x' - - bash: tasks/e2e-typescript-unsupported-node.sh - displayName: 'Run unsupported TypeScript test' diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md index 23821829c3e..c08567124af 100644 --- a/docusaurus/docs/adding-css-reset.md +++ b/docusaurus/docs/adding-css-reset.md @@ -16,6 +16,8 @@ To start using it, add `@import-normalize;` anywhere in your CSS file(s). You on /* rest of app styles */ ``` +> **Tip**: If you see an "_Unknown at rule @import-normalize css(unknownAtRules)_" warning in VSCode, change the `css.lint.unknownAtRules` setting to `ignore`. + You can control which parts of [normalize.css] to use via your project's [browserslist]. Results when [browserslist] is `last 3 versions`: diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index b604a10c810..48bfea2cf64 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -132,8 +132,8 @@ REACT_APP_NOT_SECRET_CODE=abcdef Files on the left have more priority than files on the right: -- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env` -- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env` +- `npm start`: `.env.development.local`, `.env.local`, `.env.development`, `.env` +- `npm run build`: `.env.production.local`, `.env.local`, `.env.production`, `.env` - `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing) These variables will act as the defaults if the machine does not explicitly set them. diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 40c9c2242a8..78d1c356729 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -19,7 +19,7 @@ npx create-react-app my-app --template typescript yarn create react-app my-app --template typescript ``` -> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version. +> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version. > > Global installs of `create-react-app` are no longer supported. @@ -47,7 +47,7 @@ You are not required to make a [`tsconfig.json` file](https://www.typescriptlang ## Troubleshooting -If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). +If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` or `yarn global remove create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). If you are currently using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript/), see [this blog post](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) for instructions on how to migrate to Create React App. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index fb71df0e231..958f9ac3168 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -22,7 +22,6 @@ You can adjust various development and production settings by setting environmen | 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. |
| GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines. |
-| NODE_PATH | ✅ Used | ✅ Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. |
| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. |
| 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. |
| EXTEND_ESLINT | ✅ Used | ✅ Used | When set to `true`, user provided ESLint configs will be used by `eslint-loader`. Note that any rules set to `"error"` will stop the application from building. |
diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md
index de7906a5b9f..9ae4ae69741 100644
--- a/docusaurus/docs/custom-templates.md
+++ b/docusaurus/docs/custom-templates.md
@@ -62,7 +62,7 @@ You can add whatever files you want in here, but you must have at least the file
This is the configuration file for your template. As this is a new feature, more options will be added over time. For now, only a `package` key is supported.
-The `package` key lets you provide any keys/values that you want added to the new project's `package.json`, such as dependencies (only dependencies are supported for now) and any custom scripts that your template relies on.
+The `package` key lets you provide any keys/values that you want added to the new project's `package.json`, such as dependencies and any custom scripts that your template relies on.
Below is an example `template.json` file:
diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md
index dfb2e13d6aa..c3601e7630a 100644
--- a/docusaurus/docs/deployment.md
+++ b/docusaurus/docs/deployment.md
@@ -1,497 +1,503 @@
----
-id: deployment
-title: Deployment
-sidebar_label: Deployment
----
-
-`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. For more information see the [production build](production-build.md) section.
-
-## Static Server
-
-For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest:
-
-```sh
-npm install -g serve
-serve -s build
-```
-
-The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags:
-
-```sh
-serve -s build -l 4000
-```
-
-Run this command to get a full list of the options available:
-
-```sh
-serve -h
-```
-
-## Other Solutions
-
-You don’t necessarily need a static server in order to run a Create React App project in production. It also works well when integrated into an existing server side app.
-
-Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/):
-
-```javascript
-const express = require('express');
-const path = require('path');
-const app = express();
-
-app.use(express.static(path.join(__dirname, 'build')));
-
-app.get('/', function(req, res) {
- res.sendFile(path.join(__dirname, 'build', 'index.html'));
-});
-
-app.listen(9000);
-```
-
-The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node.
-
-The `build` folder with static assets is the only output produced by Create React App.
-
-However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app.
-
-## Serving Apps with Client-Side Routing
-
-If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
-
-This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
-
-```diff
- app.use(express.static(path.join(__dirname, 'build')));
-
--app.get('/', function (req, res) {
-+app.get('/*', function (req, res) {
- res.sendFile(path.join(__dirname, 'build', 'index.html'));
- });
-```
-
-If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this:
-
-```
- Options -MultiViews
- RewriteEngine On
- RewriteCond %{REQUEST_FILENAME} !-f
- RewriteRule ^ index.html [QSA,L]
-```
-
-It will get copied to the `build` folder when you run `npm run build`.
-
-If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
-
-Now requests to `/todos/42` will be handled correctly both in development and in production.
-
-On a production build, and when you've [opted-in](making-a-progressive-web-app.md#why-opt-in),
-a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) will automatically handle all navigation requests, like for
-`/todos/42`, by serving the cached copy of your `index.html`. This
-service worker navigation routing can be configured or disabled by
-[`eject`ing](available-scripts.md#npm-run-eject) and then modifying the
-[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
-and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
-options of the `SWPrecachePlugin` [configuration](../config/webpack.config.prod.js).
-
-When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example:
-
-```js
- "start_url": ".",
-```
-
-## Building for Relative Paths
-
-By default, Create React App produces a build assuming your app is hosted at the server root.
-
-To override this, specify the `homepage` in your `package.json`, for example:
-
-```js
- "homepage": "http://mywebsite.com/relativepath",
-```
-
-This will let Create React App correctly infer the root path to use in the generated HTML file.
-
-**Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
-
-More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
-
-For example:
-
-```js
-
- -**If you skip it, your app will not deploy correctly.** - -Open your `package.json` and add a `homepage` field for your project: - -```json - "homepage": "https://myusername.github.io/my-app", -``` - -or for a GitHub user page: - -```json - "homepage": "https://myusername.github.io", -``` - -or for a custom domain page: - -```json - "homepage": "https://mywebsite.com", -``` - -Create React App uses the `homepage` field to determine the root URL in the built HTML file. - -### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` - -Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. - -To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: - -```sh -npm install --save gh-pages -``` - -Alternatively you may use `yarn`: - -```sh -yarn add gh-pages -``` - -Add the following scripts in your `package.json`: - -```diff - "scripts": { -+ "predeploy": "npm run build", -+ "deploy": "gh-pages -d build", - "start": "react-scripts start", - "build": "react-scripts build", -``` - -The `predeploy` script will run automatically before `deploy` is run. - -If you are deploying to a GitHub user page instead of a project page you'll need to make one -additional modification: - -1. Tweak your `package.json` scripts to push deployments to **master**: - -```diff - "scripts": { - "predeploy": "npm run build", -- "deploy": "gh-pages -d build", -+ "deploy": "gh-pages -b master -d build", -``` - -### Step 3: Deploy the site by running `npm run deploy` - -Then run: - -```sh -npm run deploy -``` - -### Step 4: For a project page, ensure your project’s settings use `gh-pages` - -Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: - -
-
-### Step 5: Optionally, configure the domain
-
-You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
-
-Your CNAME file should look like this:
-
-```
-mywebsite.com
-```
-
-### Notes on client-side routing
-
-GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
-
-- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
-- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
-
-### Troubleshooting
-
-#### "/dev/tty: No such a device or address"
-
-If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
-
-1. Create a new [Personal Access Token](https://github.com/settings/tokens)
-2. `git remote set-url origin https://:@github.com//` .
-3. Try `npm run deploy` again
-
-#### "Cannot read property 'email' of null"
-
-If, when deploying, you get `Cannot read property 'email' of null`, try the following:
-
-1. `git config --global user.name ''`
-2. `git config --global user.email ''`
-3. Try `npm run deploy` again
-
-## [Heroku](https://www.heroku.com/)
-
-Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
-
-You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
-
-### Resolving Heroku Deployment Errors
-
-Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases.
-
-#### "Module not found: Error: Cannot resolve 'file' or 'directory'"
-
-If you get something like this:
-
-```
-remote: Failed to create a production build. Reason:
-remote: Module not found: Error: Cannot resolve 'file' or 'directory'
-MyDirectory in /tmp/build_1234/src
-```
-
-It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
-
-This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes.
-
-#### "Could not find a required file."
-
-If you exclude or ignore necessary files from the package you will see a error similar this one:
-
-```
-remote: Could not find a required file.
-remote: Name: `index.html`
-remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
-remote:
-remote: npm ERR! Linux 3.13.0-105-generic
-remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
-```
-
-In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`.
-
-## [Netlify](https://www.netlify.com/)
-
-**To do a manual deploy to Netlify’s CDN:**
-
-```sh
-npm install netlify-cli -g
-netlify deploy
-```
-
-Choose `build` as the path to deploy.
-
-**To setup continuous delivery:**
-
-With this setup Netlify will build and deploy when you push to git or open a pull request:
-
-1. [Start a new netlify project](https://app.netlify.com/signup)
-2. Pick your Git hosting service and select your repository
-3. Click `Build your site`
-
-**Support for client-side routing:**
-
-To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules:
-
-```
-/* /index.html 200
-```
-
-When you build the project, Create React App will place the `public` folder contents into the build output.
-
-## [ZEIT Now](https://zeit.co)
-
-[ZEIT Now](https://zeit.co) is a cloud platform for websites and serverless APIs, that you can use to deploy your Create React App projects to your personal domain (or a free `.now.sh` suffixed URL).
-
-This guide will show you how to get started in a few quick steps:
-
-### Step 1: Installing Now CLI
-
-To install their command-line interface with [npm](https://www.npmjs.com/package/now), run the following command:
-
-```shell
-npm i -g now
-```
-
-### Step 2: Deploying
-
-You can deploy your application by running the following command in the root of the project directory:
-
-```shell
-now
-```
-
-**Alternatively**, you can also use their integration for [GitHub](https://zeit.co/github) or [GitLab](https://zeit.co/gitlab).
-
-That’s all!
-
-Your site will now deploy, and you will receive a link similar to the following: https://react.now-examples.now.sh
-
-Out of the box, you are preconfigured for client-side routing compatibility and appropriate default caching headers. This behaviour can be overwritten [like this](https://zeit.co/docs/v2/advanced/routes/).
-
-## [Render](https://render.com)
-
-Render offers free [static site](https://render.com/docs/static-sites) hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.
-
-Deploy your app in only a few minutes by following the [Create React App deployment guide](https://render.com/docs/deploy-create-react-app).
-
-Use invite code `cra` to sign up or use [this link](https://render.com/i/cra).
-
-## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)
-
-See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. If you are looking to add a custom domain, HTTPS and continuous deployment see this [blog post](https://medium.com/dailyjs/a-guide-to-deploying-your-react-app-with-aws-s3-including-https-a-custom-domain-a-cdn-and-58245251f081).
-
-## [Surge](https://surge.sh/)
-
-Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account.
-
-When asked about the project path, make sure to specify the `build` folder, for example:
-
-```sh
- project path: /path/to/project/build
-```
-
-Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
-
-## Publishing Components To npm
-
-Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing.
+---
+id: deployment
+title: Deployment
+sidebar_label: Deployment
+---
+
+`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. For more information see the [production build](production-build.md) section.
+
+## Static Server
+
+For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest:
+
+```sh
+npm install -g serve
+serve -s build
+```
+
+The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags:
+
+```sh
+serve -s build -l 4000
+```
+
+Run this command to get a full list of the options available:
+
+```sh
+serve -h
+```
+
+## Other Solutions
+
+You don’t necessarily need a static server in order to run a Create React App project in production. It also works well when integrated into an existing server side app.
+
+Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/):
+
+```javascript
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.use(express.static(path.join(__dirname, 'build')));
+
+app.get('/', function (req, res) {
+ res.sendFile(path.join(__dirname, 'build', 'index.html'));
+});
+
+app.listen(9000);
+```
+
+The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node.
+
+The `build` folder with static assets is the only output produced by Create React App.
+
+However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app.
+
+## Serving Apps with Client-Side Routing
+
+If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
+
+This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
+
+```diff
+ app.use(express.static(path.join(__dirname, 'build')));
+
+-app.get('/', function (req, res) {
++app.get('/*', function (req, res) {
+ res.sendFile(path.join(__dirname, 'build', 'index.html'));
+ });
+```
+
+If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this:
+
+```
+ Options -MultiViews
+ RewriteEngine On
+ RewriteCond %{REQUEST_FILENAME} !-f
+ RewriteRule ^ index.html [QSA,L]
+```
+
+It will get copied to the `build` folder when you run `npm run build`.
+
+If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
+
+Now requests to `/todos/42` will be handled correctly both in development and in production.
+
+On a production build, and when you've [opted-in](making-a-progressive-web-app.md#why-opt-in),
+a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) will automatically handle all navigation requests, like for
+`/todos/42`, by serving the cached copy of your `index.html`. This
+service worker navigation routing can be configured or disabled by
+[`eject`ing](available-scripts.md#npm-run-eject) and then modifying the
+[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
+and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
+options of the `SWPrecachePlugin` [configuration](../config/webpack.config.prod.js).
+
+When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example:
+
+```js
+ "start_url": ".",
+```
+
+## Building for Relative Paths
+
+By default, Create React App produces a build assuming your app is hosted at the server root.
+
+To override this, specify the `homepage` in your `package.json`, for example:
+
+```js
+ "homepage": "http://mywebsite.com/relativepath",
+```
+
+This will let Create React App correctly infer the root path to use in the generated HTML file.
+
+**Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
+
+More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
+
+For example:
+
+```js
+
+ +**If you skip it, your app will not deploy correctly.** + +Open your `package.json` and add a `homepage` field for your project: + +```json + "homepage": "https://myusername.github.io/my-app", +``` + +or for a GitHub user page: + +```json + "homepage": "https://myusername.github.io", +``` + +or for a custom domain page: + +```json + "homepage": "https://mywebsite.com", +``` + +Create React App uses the `homepage` field to determine the root URL in the built HTML file. + +### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` + +Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. + +To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: + +```sh +npm install --save gh-pages +``` + +Alternatively you may use `yarn`: + +```sh +yarn add gh-pages +``` + +Add the following scripts in your `package.json`: + +```diff + "scripts": { ++ "predeploy": "npm run build", ++ "deploy": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build", +``` + +The `predeploy` script will run automatically before `deploy` is run. + +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: + +1. Tweak your `package.json` scripts to push deployments to **master**: + +```diff + "scripts": { + "predeploy": "npm run build", +- "deploy": "gh-pages -d build", ++ "deploy": "gh-pages -b master -d build", +``` + +### Step 3: Deploy the site by running `npm run deploy` + +Then run: + +```sh +npm run deploy +``` + +### Step 4: For a project page, ensure your project’s settings use `gh-pages` + +Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: + +
+
+### Step 5: Optionally, configure the domain
+
+You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
+
+Your CNAME file should look like this:
+
+```
+mywebsite.com
+```
+
+### Notes on client-side routing
+
+GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
+
+- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
+- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
+
+### Troubleshooting
+
+#### "/dev/tty: No such a device or address"
+
+If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
+
+1. Create a new [Personal Access Token](https://github.com/settings/tokens)
+2. `git remote set-url origin https://:@github.com//` .
+3. Try `npm run deploy` again
+
+#### "Cannot read property 'email' of null"
+
+If, when deploying, you get `Cannot read property 'email' of null`, try the following:
+
+1. `git config --global user.name ''`
+2. `git config --global user.email ''`
+3. Try `npm run deploy` again
+
+## [Heroku](https://www.heroku.com/)
+
+Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
+
+You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
+
+### Resolving Heroku Deployment Errors
+
+Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases.
+
+#### "Module not found: Error: Cannot resolve 'file' or 'directory'"
+
+If you get something like this:
+
+```
+remote: Failed to create a production build. Reason:
+remote: Module not found: Error: Cannot resolve 'file' or 'directory'
+MyDirectory in /tmp/build_1234/src
+```
+
+It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
+
+This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes.
+
+#### "Could not find a required file."
+
+If you exclude or ignore necessary files from the package you will see a error similar this one:
+
+```
+remote: Could not find a required file.
+remote: Name: `index.html`
+remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
+remote:
+remote: npm ERR! Linux 3.13.0-105-generic
+remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
+```
+
+In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`.
+
+## [Netlify](https://www.netlify.com/)
+
+**To do a manual deploy to Netlify’s CDN:**
+
+```sh
+npm install netlify-cli -g
+netlify deploy
+```
+
+Choose `build` as the path to deploy.
+
+**To setup continuous delivery:**
+
+With this setup Netlify will build and deploy when you push to git or open a pull request:
+
+1. [Start a new netlify project](https://app.netlify.com/signup)
+2. Pick your Git hosting service and select your repository
+3. Click `Build your site`
+
+**Support for client-side routing:**
+
+To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules:
+
+```
+/* /index.html 200
+```
+
+When you build the project, Create React App will place the `public` folder contents into the build output.
+
+## [ZEIT Now](https://zeit.co)
+
+[ZEIT Now](https://zeit.co) is a cloud platform for websites and serverless APIs, that you can use to deploy your Create React App projects to your personal domain (or a free `.now.sh` suffixed URL).
+
+This guide will show you how to get started in a few quick steps:
+
+### Step 1: Installing Now CLI
+
+To install their command-line interface with [npm](https://www.npmjs.com/package/now), run the following command:
+
+```shell
+npm i -g now
+```
+
+### Step 2: Deploying
+
+You can deploy your application by running the following command in the root of the project directory:
+
+```shell
+now
+```
+
+**Alternatively**, you can also use their integration for [GitHub](https://zeit.co/github) or [GitLab](https://zeit.co/gitlab).
+
+That’s all!
+
+Your site will now deploy, and you will receive a link similar to the following: https://react.now-examples.now.sh
+
+Out of the box, you are preconfigured for client-side routing compatibility and appropriate default caching headers. This behaviour can be overwritten [like this](https://zeit.co/docs/v2/advanced/routes/).
+
+## [Render](https://render.com)
+
+Render offers free [static site](https://render.com/docs/static-sites) hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.
+
+Deploy your app in only a few minutes by following the [Create React App deployment guide](https://render.com/docs/deploy-create-react-app).
+
+Use invite code `cra` to sign up or use [this link](https://render.com/i/cra).
+
+## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)
+
+See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. If you are looking to add a custom domain, HTTPS and continuous deployment see this [blog post](https://medium.com/dailyjs/a-guide-to-deploying-your-react-app-with-aws-s3-including-https-a-custom-domain-a-cdn-and-58245251f081).
+
+## [Surge](https://surge.sh/)
+
+Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account.
+
+When asked about the project path, make sure to specify the `build` folder, for example:
+
+```sh
+ project path: /path/to/project/build
+```
+
+Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
+
+## Publishing Components To npm
+
+Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing.
diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md
index f23236110b3..b95bc100470 100644
--- a/docusaurus/docs/getting-started.md
+++ b/docusaurus/docs/getting-started.md
@@ -14,7 +14,7 @@ cd my-app
npm start
```
-> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version.
+> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version.
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
@@ -34,7 +34,7 @@ Create a project, and you’re good to go.
## Creating an App
-**You’ll need to have Node >= 8.10 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 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.
To create a new app, you may choose one of the following methods:
@@ -120,7 +120,8 @@ my-app
├── index.css
├── index.js
├── logo.svg
- └── serviceWorker.js
+ ├── serviceWorker.js
+ └── setupTests.js
```
No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder:
diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md
index 227b21eb4e6..ba9802e6088 100644
--- a/docusaurus/docs/making-a-progressive-web-app.md
+++ b/docusaurus/docs/making-a-progressive-web-app.md
@@ -15,7 +15,7 @@ following in their [`src/index.js`](https://github.com/facebook/create-react-app
```js
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
+// Learn more about service workers: https://cra.link/PWA
serviceWorker.unregister();
```
diff --git a/docusaurus/docs/measuring-performance.md b/docusaurus/docs/measuring-performance.md
new file mode 100644
index 00000000000..a41635cbe40
--- /dev/null
+++ b/docusaurus/docs/measuring-performance.md
@@ -0,0 +1,65 @@
+---
+id: measuring-performance
+title: Measuring Performance
+---
+
+By default, Create React App includes a performance relayer that allows you to measure and analyze
+the performance of your application using different metrics.
+
+To measure any of the supported metrics, you only need to pass a function into the `reportWebVitals`
+function in `index.js`:
+
+```js
+reportWebVitals(console.log);
+```
+
+This function is fired when the final values for any of the metrics have finished calculating on the
+page. You can use it to log any of the results to the console or send to a particular endpoint.
+
+## Web Vitals
+
+[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user
+experience of a web page. In Create React App, a third-party library is used to measure these
+metrics ([web-vitals](https://github.com/GoogleChrome/web-vitals)).
+
+To understand more about the object returned to the function when a metric value is calculated,
+refer to the [documentation](https://github.com/GoogleChrome/web-vitals/#types). The [Browser
+Support](https://github.com/GoogleChrome/web-vitals/#browser-support) section also explains which browsers are supported.
+
+## Sending results to analytics
+
+With the `reportWebVitals` function, you can send any of results to an analytics endpoint to measure and track real user performance on your site. For example:
+
+```js
+function sendToAnalytics(metric) {
+ const body = JSON.stringify(metric);
+ const url = 'https://example.com/analytics';
+
+ // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
+ if (navigator.sendBeacon) {
+ navigator.sendBeacon(url, body);
+ } else {
+ fetch(url, { body, method: 'POST', keepalive: true });
+ }
+}
+
+reportWebVitals(sendToAnalytics);
+```
+
+> **Note:** If you use Google Analytics, use the `id` value to make it easier to construct metric distributions manually (to calculate percentiles, etc…).
+>
+> ```js
+> function sendToAnalytics({ id, name, value }) {
+> ga('send', 'event', {
+> eventCategory: 'Web Vitals',
+> eventAction: name,
+> eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
+> eventLabel: id, // id unique to current page load
+> nonInteraction: true, // avoids affecting bounce rate
+> });
+> }
+>
+> reportWebVitals(sendToAnalytics);
+> ```
+>
+> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md
index a757355e018..14244ae275e 100644
--- a/docusaurus/docs/running-tests.md
+++ b/docusaurus/docs/running-tests.md
@@ -147,7 +147,7 @@ it('renders welcome message', () => {
All Jest matchers are [extensively documented here](https://jestjs.io/docs/en/expect.html).
-Nevertheless you can use a third-party assertion library like [Chai](https://chaijs.com/) if you want to, as described below.
+Nevertheless you can use a third-party assertion library like [Chai](https://www.chaijs.com/) if you want to, as described below.
Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to improve your tests with readable matchers. The above `contains` code can be written more concisely with jest-enzyme.
@@ -216,7 +216,7 @@ Learn more about the utilities provided by `react-testing-library` to facilitate
We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566).
-However, if you are used to other libraries, such as [Chai](https://chaijs.com/) and [Sinon](https://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this:
+However, if you are used to other libraries, such as [Chai](https://www.chaijs.com/) and [Sinon](https://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this:
```js
import sinon from 'sinon';
diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md
index 4c99126a420..35f3ea31ae5 100644
--- a/docusaurus/docs/setting-up-your-editor.md
+++ b/docusaurus/docs/setting-up-your-editor.md
@@ -112,7 +112,7 @@ The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm,
## Formatting Code Automatically
-Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.io/playground/).
+Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.io/playground/).
To format our code whenever we make a commit in git, we need to install the following dependencies:
diff --git a/docusaurus/website/docusaurus.config.js b/docusaurus/website/docusaurus.config.js
index 11a5e25aba7..23849556969 100644
--- a/docusaurus/website/docusaurus.config.js
+++ b/docusaurus/website/docusaurus.config.js
@@ -82,8 +82,8 @@ const siteConfig = {
'https://stackoverflow.com/questions/tagged/create-react-app',
},
{
- label: 'Spectrum',
- href: 'https://spectrum.chat/create-react-app',
+ label: 'GitHub Discussions',
+ href: 'https://github.com/facebook/create-react-app/discussions',
},
{
label: 'Twitter',
diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json
index f51541db097..386a29da1bf 100644
--- a/docusaurus/website/sidebars.json
+++ b/docusaurus/website/sidebars.json
@@ -36,6 +36,7 @@
"adding-a-router",
"adding-custom-environment-variables",
"making-a-progressive-web-app",
+ "measuring-performance",
"production-build"
],
"Testing": ["running-tests", "debugging-tests"],
diff --git a/package.json b/package.json
index 92a9291ecb3..8f10cdcae49 100644
--- a/package.json
+++ b/package.json
@@ -20,31 +20,29 @@
"compile:lockfile": "node tasks/compile-lockfile.js"
},
"devDependencies": {
- "@testing-library/jest-dom": "^4.2.0",
- "@testing-library/react": "^9.3.0",
- "@testing-library/user-event": "^7.1.2",
+ "@testing-library/jest-dom": "^5.9.0",
+ "@testing-library/react": "^10.2.1",
+ "@testing-library/user-event": "^12.0.2",
"alex": "^8.0.0",
- "eslint": "^6.1.0",
+ "eslint": "^7.3.0",
"execa": "1.0.0",
- "fs-extra": "^7.0.1",
- "get-port": "^4.2.0",
- "globby": "^9.1.0",
- "husky": "^1.3.1",
- "jest": "24.9.0",
- "lerna": "3.19.0",
+ "fs-extra": "^9.0.0",
+ "get-port": "^5.1.1",
+ "globby": "^11.0.0",
+ "husky": "^4.2.5",
+ "jest": "26.0.1",
+ "lerna": "3.20.2",
"lerna-changelog": "~0.8.2",
- "lint-staged": "^8.0.4",
- "meow": "^5.0.0",
- "multimatch": "^3.0.0",
- "prettier": "1.19.1",
- "puppeteer": "^2.0.0",
- "strip-ansi": "^5.1.0",
+ "lint-staged": "^10.2.2",
+ "meow": "^6.1.1",
+ "multimatch": "^4.0.0",
+ "prettier": "2.0.5",
+ "puppeteer": "^3.0.2",
+ "strip-ansi": "^6.0.0",
"svg-term-cli": "^2.1.1",
"tempy": "^0.2.1",
- "wait-for-localhost": "^3.1.0"
- },
- "resolutions": {
- "mkdirp": "0.5.1"
+ "wait-for-localhost": "^3.1.0",
+ "web-vitals": "^0.2.2"
},
"husky": {
"hooks": {
@@ -53,11 +51,7 @@
},
"lint-staged": {
"*.{js,md,css,html}": [
- "prettier --trailing-comma es5 --single-quote --write",
- "git add"
- ],
- "yarn.lock": [
- "git rm --cached"
+ "prettier --trailing-comma es5 --single-quote --write"
]
}
}
diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js
index ddf51254b7e..40e2f763623 100644
--- a/packages/babel-plugin-named-asset-import/index.js
+++ b/packages/babel-plugin-named-asset-import/index.js
@@ -35,12 +35,7 @@ function namedAssetImportPlugin({ types: t }) {
return {
visitor: {
- ExportNamedDeclaration(
- path,
- {
- opts: { loaderMap },
- }
- ) {
+ ExportNamedDeclaration(path, { opts: { loaderMap } }) {
if (!path.node.source) {
return;
}
@@ -67,12 +62,7 @@ function namedAssetImportPlugin({ types: t }) {
);
});
},
- ImportDeclaration(
- path,
- {
- opts: { loaderMap },
- }
- ) {
+ ImportDeclaration(path, { opts: { loaderMap } }) {
replaceMatchingSpecifiers(path, loaderMap, (specifier, sourcePath) => {
if (t.isImportDefaultSpecifier(specifier)) {
return t.importDeclaration(
diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json
index 28ff767814e..4d4c0bea7e4 100644
--- a/packages/babel-plugin-named-asset-import/package.json
+++ b/packages/babel-plugin-named-asset-import/package.json
@@ -20,7 +20,7 @@
},
"devDependencies": {
"babel-plugin-tester": "^8.0.1",
- "jest": "24.9.0"
+ "jest": "26.0.1"
},
"scripts": {
"test": "jest"
diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md
index 86393774f08..1fc51788201 100644
--- a/packages/babel-preset-react-app/README.md
+++ b/packages/babel-preset-react-app/README.md
@@ -53,6 +53,7 @@ Make sure you have a `tsconfig.json` file at the root directory. You can also us
```
## Absolute Runtime Paths
+
Absolute paths are enabled by default for imports. To use relative paths instead, set the `absoluteRuntime` option in `.babelrc` to `false`:
```
diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js
index 4985ef49ecb..473d0969f4e 100644
--- a/packages/babel-preset-react-app/create.js
+++ b/packages/babel-preset-react-app/create.js
@@ -20,7 +20,7 @@ const validateBoolOption = (name, value, defaultValue) => {
return value;
};
-module.exports = function(api, opts, env) {
+module.exports = function (api, opts, env) {
if (!opts) {
opts = {};
}
@@ -82,7 +82,6 @@ module.exports = function(api, opts, env) {
// Allow importing core-js in entrypoint and use browserlist to select polyfills
useBuiltIns: 'entry',
// Set the corejs version we are using to avoid warnings in console
- // This will need to change once we upgrade to corejs@3
corejs: 3,
// Do not transform modules to CJS
modules: false,
diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js
index 7ec4d0e2cf5..8c3256f15e8 100644
--- a/packages/babel-preset-react-app/dependencies.js
+++ b/packages/babel-preset-react-app/dependencies.js
@@ -20,7 +20,7 @@ const validateBoolOption = (name, value, defaultValue) => {
return value;
};
-module.exports = function(api, opts) {
+module.exports = function (api, opts) {
if (!opts) {
opts = {};
}
diff --git a/packages/babel-preset-react-app/dev.js b/packages/babel-preset-react-app/dev.js
index ce87adea4fa..89c6db5f314 100644
--- a/packages/babel-preset-react-app/dev.js
+++ b/packages/babel-preset-react-app/dev.js
@@ -8,6 +8,6 @@
const create = require('./create');
-module.exports = function(api, opts) {
+module.exports = function (api, opts) {
return create(api, Object.assign({ helpers: false }, opts), 'development');
};
diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
index 621af951619..e45c274bffb 100644
--- a/packages/babel-preset-react-app/index.js
+++ b/packages/babel-preset-react-app/index.js
@@ -8,7 +8,7 @@
const create = require('./create');
-module.exports = function(api, opts) {
+module.exports = function (api, opts) {
// This is similar to how `env` works in Babel:
// https://babeljs.io/docs/usage/babelrc/#env-option
// We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
index 29d1f8822a8..99659e56b71 100644
--- a/packages/babel-preset-react-app/package.json
+++ b/packages/babel-preset-react-app/package.json
@@ -21,19 +21,19 @@
"test.js"
],
"dependencies": {
- "@babel/core": "7.9.0",
- "@babel/plugin-proposal-class-properties": "7.8.3",
- "@babel/plugin-proposal-decorators": "7.8.3",
- "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
- "@babel/plugin-proposal-numeric-separator": "7.8.3",
- "@babel/plugin-proposal-optional-chaining": "7.9.0",
- "@babel/plugin-transform-flow-strip-types": "7.9.0",
- "@babel/plugin-transform-react-display-name": "7.8.3",
- "@babel/plugin-transform-runtime": "7.9.0",
- "@babel/preset-env": "7.9.0",
- "@babel/preset-react": "7.9.1",
- "@babel/preset-typescript": "7.9.0",
- "@babel/runtime": "7.9.0",
+ "@babel/core": "7.10.3",
+ "@babel/plugin-proposal-class-properties": "7.10.1",
+ "@babel/plugin-proposal-decorators": "7.10.3",
+ "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.1",
+ "@babel/plugin-proposal-numeric-separator": "7.10.1",
+ "@babel/plugin-proposal-optional-chaining": "7.10.3",
+ "@babel/plugin-transform-flow-strip-types": "7.10.1",
+ "@babel/plugin-transform-react-display-name": "7.10.3",
+ "@babel/plugin-transform-runtime": "7.10.3",
+ "@babel/preset-env": "7.10.3",
+ "@babel/preset-react": "7.10.1",
+ "@babel/preset-typescript": "7.10.1",
+ "@babel/runtime": "7.10.3",
"babel-plugin-macros": "2.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24"
}
diff --git a/packages/babel-preset-react-app/prod.js b/packages/babel-preset-react-app/prod.js
index 0873aee7258..d78d22286d0 100644
--- a/packages/babel-preset-react-app/prod.js
+++ b/packages/babel-preset-react-app/prod.js
@@ -8,6 +8,6 @@
const create = require('./create');
-module.exports = function(api, opts) {
+module.exports = function (api, opts) {
return create(api, Object.assign({ helpers: false }, opts), 'production');
};
diff --git a/packages/babel-preset-react-app/test.js b/packages/babel-preset-react-app/test.js
index be189fc3265..67afde949b4 100644
--- a/packages/babel-preset-react-app/test.js
+++ b/packages/babel-preset-react-app/test.js
@@ -8,6 +8,6 @@
const create = require('./create');
-module.exports = function(api, opts) {
+module.exports = function (api, opts) {
return create(api, Object.assign({ helpers: false }, opts), 'test');
};
diff --git a/packages/babel-preset-react-app/webpack-overrides.js b/packages/babel-preset-react-app/webpack-overrides.js
index 95a87eeb66f..664c87af5fa 100644
--- a/packages/babel-preset-react-app/webpack-overrides.js
+++ b/packages/babel-preset-react-app/webpack-overrides.js
@@ -10,7 +10,7 @@ const crypto = require('crypto');
const macroCheck = new RegExp('[./]macro');
-module.exports = function() {
+module.exports = function () {
return {
// This function transforms the Babel configuration on a per-file basis
config(config, { source }) {
diff --git a/packages/confusing-browser-globals/package.json b/packages/confusing-browser-globals/package.json
index b133e7ff9f6..26b193904d5 100644
--- a/packages/confusing-browser-globals/package.json
+++ b/packages/confusing-browser-globals/package.json
@@ -20,6 +20,6 @@
"index.js"
],
"devDependencies": {
- "jest": "24.9.0"
+ "jest": "26.0.1"
}
}
diff --git a/packages/cra-template-4pd/template/src/reportWebVitals.ts b/packages/cra-template-4pd/template/src/reportWebVitals.ts
new file mode 100644
index 00000000000..59d81aaab24
--- /dev/null
+++ b/packages/cra-template-4pd/template/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+}
+
+export default reportWebVitals;
diff --git a/packages/cra-template-4pd/template/src/setupTests.ts b/packages/cra-template-4pd/template/src/setupTests.ts
index 74b1a275a0e..8f2609b7b3e 100644
--- a/packages/cra-template-4pd/template/src/setupTests.ts
+++ b/packages/cra-template-4pd/template/src/setupTests.ts
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
diff --git a/packages/cra-template-typescript/package.json b/packages/cra-template-typescript/package.json
new file mode 100644
index 00000000000..5b3936acf4c
--- /dev/null
+++ b/packages/cra-template-typescript/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "cra-template-typescript",
+ "version": "1.0.3",
+ "keywords": [
+ "react",
+ "create-react-app",
+ "template",
+ "typescript"
+ ],
+ "description": "The base TypeScript template for Create React App.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/facebook/create-react-app.git",
+ "directory": "packages/cra-template-typescript"
+ },
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ },
+ "bugs": {
+ "url": "https://github.com/facebook/create-react-app/issues"
+ },
+ "files": [
+ "template",
+ "template.json"
+ ]
+}
diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
new file mode 100644
index 00000000000..f83ed6a5c25
--- /dev/null
+++ b/packages/cra-template-typescript/template.json
@@ -0,0 +1,15 @@
+{
+ "package": {
+ "dependencies": {
+ "@testing-library/jest-dom": "^5.9.0",
+ "@testing-library/react": "^10.2.1",
+ "@testing-library/user-event": "^12.0.2",
+ "@types/node": "^12.0.0",
+ "@types/react": "^16.9.0",
+ "@types/react-dom": "^16.9.0",
+ "@types/jest": "^25.0.0",
+ "typescript": "^3.9.5",
+ "web-vitals": "^0.2.2"
+ }
+ }
+}
diff --git a/packages/cra-template-typescript/template/public/favicon.ico b/packages/cra-template-typescript/template/public/favicon.ico
new file mode 100644
index 00000000000..a11777cc471
Binary files /dev/null and b/packages/cra-template-typescript/template/public/favicon.ico differ
diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx
new file mode 100644
index 00000000000..bdf2dd80541
--- /dev/null
+++ b/packages/cra-template-typescript/template/src/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+
+ ,
+ document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://cra.link/PWA
+serviceWorker.unregister();
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/packages/cra-template-typescript/template/src/serviceWorker.ts b/packages/cra-template-typescript/template/src/serviceWorker.ts
new file mode 100644
index 00000000000..9fca0aa3bdf
--- /dev/null
+++ b/packages/cra-template-typescript/template/src/serviceWorker.ts
@@ -0,0 +1,149 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.0/8 are considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+type Config = {
+ onSuccess?: (registration: ServiceWorkerRegistration) => void;
+ onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+ if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(
+ process.env.PUBLIC_URL,
+ window.location.href
+ );
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener('load', () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Let's check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl, config);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ 'This web app is being served cache-first by a service ' +
+ 'worker. To learn more, visit https://cra.link/PWA'
+ );
+ });
+ } else {
+ // Is not localhost. Just register service worker
+ registerValidSW(swUrl, config);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker == null) {
+ return;
+ }
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the updated precached content has been fetched,
+ // but the previous service worker will still serve the older
+ // content until all client tabs are closed.
+ console.log(
+ 'New content is available and will be used when all ' +
+ 'tabs for this page are closed. See https://cra.link/PWA.'
+ );
+
+ // Execute callback
+ if (config && config.onUpdate) {
+ config.onUpdate(registration);
+ }
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log('Content is cached for offline use.');
+
+ // Execute callback
+ if (config && config.onSuccess) {
+ config.onSuccess(registration);
+ }
+ }
+ }
+ };
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl, {
+ headers: { 'Service-Worker': 'script' }
+ })
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ const contentType = response.headers.get('content-type');
+ if (
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf('javascript') === -1)
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl, config);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
+ });
+}
+
+export function unregister() {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.ready
+ .then(registration => {
+ registration.unregister();
+ })
+ .catch(error => {
+ console.error(error.message);
+ });
+ }
+}
diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json
index f28004102ff..d34d8229b6f 100644
--- a/packages/cra-template/package.json
+++ b/packages/cra-template/package.json
@@ -14,7 +14,7 @@
},
"license": "MIT",
"engines": {
- "node": ">=8"
+ "node": ">=10"
},
"bugs": {
"url": "https://github.com/facebook/create-react-app/issues"
diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json
index 4c6861dc1f0..94742d7614e 100644
--- a/packages/cra-template/template.json
+++ b/packages/cra-template/template.json
@@ -1,9 +1,10 @@
{
"package": {
"dependencies": {
- "@testing-library/react": "^9.3.2",
- "@testing-library/jest-dom": "^4.2.4",
- "@testing-library/user-event": "^7.1.2"
+ "@testing-library/jest-dom": "^5.9.0",
+ "@testing-library/react": "^10.2.1",
+ "@testing-library/user-event": "^12.0.2",
+ "web-vitals": "^0.2.2"
}
}
}
diff --git a/packages/cra-template/template/public/favicon.ico b/packages/cra-template/template/public/favicon.ico
index bcd5dfd67cd..a11777cc471 100644
Binary files a/packages/cra-template/template/public/favicon.ico and b/packages/cra-template/template/public/favicon.ico differ
diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js
index f5185c1ec7a..bdf2dd80541 100644
--- a/packages/cra-template/template/src/index.js
+++ b/packages/cra-template/template/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
ReactDOM.render(
@@ -13,5 +14,10 @@ ReactDOM.render(
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
+// Learn more about service workers: https://cra.link/PWA
serviceWorker.unregister();
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/packages/cra-template/template/src/reportWebVitals.js b/packages/cra-template/template/src/reportWebVitals.js
new file mode 100644
index 00000000000..5253d3ad9e6
--- /dev/null
+++ b/packages/cra-template/template/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;
diff --git a/packages/cra-template/template/src/serviceWorker.js b/packages/cra-template/template/src/serviceWorker.js
index b04b771a826..02b0533647d 100644
--- a/packages/cra-template/template/src/serviceWorker.js
+++ b/packages/cra-template/template/src/serviceWorker.js
@@ -8,7 +8,7 @@
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
+// opt-in, read https://cra.link/PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
@@ -43,7 +43,7 @@ export function register(config) {
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
- 'worker. To learn more, visit https://bit.ly/CRA-PWA'
+ 'worker. To learn more, visit https://cra.link/PWA'
);
});
} else {
@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
- 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+ 'tabs for this page are closed. See https://cra.link/PWA.'
);
// Execute callback
diff --git a/packages/cra-template/template/src/setupTests.js b/packages/cra-template/template/src/setupTests.js
index 74b1a275a0e..8f2609b7b3e 100644
--- a/packages/cra-template/template/src/setupTests.js
+++ b/packages/cra-template/template/src/setupTests.js
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
new file mode 100755
index 00000000000..dc97cf2fda5
--- /dev/null
+++ b/packages/create-react-app/createReactApp.js
@@ -0,0 +1,1077 @@
+/**
+ * Copyright (c) 2015-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.
+ */
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// /!\ DO NOT MODIFY THIS FILE /!\
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+//
+// create-react-app is installed globally on people's computers. This means
+// that it is extremely difficult to have them upgrade the version and
+// because there's only one global version installed, it is very prone to
+// breaking changes.
+//
+// The only job of create-react-app is to init the repository and then
+// forward all the commands to the local version of create-react-app.
+//
+// If you need to add a new command, please add it to the scripts/ folder.
+//
+// The only reason to modify this file is to add more warnings and
+// troubleshooting information for the `create-react-app` command.
+//
+// Do not make breaking changes! We absolutely don't want to have to
+// tell people to update their global version of create-react-app.
+//
+// Also be careful with new language features.
+// This file must work on Node 6+.
+//
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// /!\ DO NOT MODIFY THIS FILE /!\
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+'use strict';
+
+const chalk = require('chalk');
+const commander = require('commander');
+const dns = require('dns');
+const envinfo = require('envinfo');
+const execSync = require('child_process').execSync;
+const fs = require('fs-extra');
+const hyperquest = require('hyperquest');
+const inquirer = require('inquirer');
+const os = require('os');
+const path = require('path');
+const semver = require('semver');
+const spawn = require('cross-spawn');
+const tmp = require('tmp');
+const unpack = require('tar-pack').unpack;
+const url = require('url');
+const validateProjectName = require('validate-npm-package-name');
+
+const packageJson = require('./package.json');
+
+let projectName;
+
+const program = new commander.Command(packageJson.name)
+ .version(packageJson.version)
+ .arguments('')
+ .usage(`${chalk.green('')} [options]`)
+ .action(name => {
+ projectName = name;
+ })
+ .option('--verbose', 'print additional logs')
+ .option('--info', 'print environment debug info')
+ .option(
+ '--scripts-version ',
+ 'use a non-standard version of react-scripts'
+ )
+ .option(
+ '--template ',
+ 'specify a template for the created project'
+ )
+ .option('--use-npm')
+ .option('--use-pnp')
+ .allowUnknownOption()
+ .on('--help', () => {
+ console.log(` Only ${chalk.green('')} is required.`);
+ console.log();
+ console.log(
+ ` A custom ${chalk.cyan('--scripts-version')} can be one of:`
+ );
+ console.log(` - a specific npm version: ${chalk.green('0.8.2')}`);
+ console.log(` - a specific npm tag: ${chalk.green('@next')}`);
+ console.log(
+ ` - a custom fork published on npm: ${chalk.green(
+ 'my-react-scripts'
+ )}`
+ );
+ console.log(
+ ` - a local path relative to the current working directory: ${chalk.green(
+ 'file:../my-react-scripts'
+ )}`
+ );
+ console.log(
+ ` - a .tgz archive: ${chalk.green(
+ 'https://mysite.com/my-react-scripts-0.8.2.tgz'
+ )}`
+ );
+ console.log(
+ ` - a .tar.gz archive: ${chalk.green(
+ 'https://mysite.com/my-react-scripts-0.8.2.tar.gz'
+ )}`
+ );
+ console.log(
+ ` It is not needed unless you specifically want to use a fork.`
+ );
+ console.log();
+ console.log(` A custom ${chalk.cyan('--template')} can be one of:`);
+ console.log(
+ ` - a custom template published on npm: ${chalk.green(
+ 'cra-template-typescript'
+ )}`
+ );
+ console.log(
+ ` - a local path relative to the current working directory: ${chalk.green(
+ 'file:../my-custom-template'
+ )}`
+ );
+ console.log(
+ ` - a .tgz archive: ${chalk.green(
+ 'https://mysite.com/my-custom-template-0.8.2.tgz'
+ )}`
+ );
+ console.log(
+ ` - a .tar.gz archive: ${chalk.green(
+ 'https://mysite.com/my-custom-template-0.8.2.tar.gz'
+ )}`
+ );
+ console.log();
+ console.log(
+ ` If you have any problems, do not hesitate to file an issue:`
+ );
+ console.log(
+ ` ${chalk.cyan(
+ 'https://github.com/facebook/create-react-app/issues/new'
+ )}`
+ );
+ console.log();
+ })
+ .parse(process.argv);
+
+if (program.info) {
+ console.log(chalk.bold('\nEnvironment Info:'));
+ console.log(
+ `\n current version of ${packageJson.name}: ${packageJson.version}`
+ );
+ console.log(` running from ${__dirname}`);
+ return envinfo
+ .run(
+ {
+ System: ['OS', 'CPU'],
+ Binaries: ['Node', 'npm', 'Yarn'],
+ Browsers: ['Chrome', 'Edge', 'Internet Explorer', 'Firefox', 'Safari'],
+ npmPackages: ['react', 'react-dom', 'react-scripts'],
+ npmGlobalPackages: ['create-react-app'],
+ },
+ {
+ duplicates: true,
+ showNotFound: true,
+ }
+ )
+ .then(console.log);
+}
+
+if (typeof projectName === 'undefined') {
+ console.error('Please specify the project directory:');
+ console.log(
+ ` ${chalk.cyan(program.name())} ${chalk.green('')}`
+ );
+ console.log();
+ console.log('For example:');
+ console.log(` ${chalk.cyan(program.name())} ${chalk.green('my-react-app')}`);
+ console.log();
+ console.log(
+ `Run ${chalk.cyan(`${program.name()} --help`)} to see all options.`
+ );
+ process.exit(1);
+}
+
+createApp(
+ projectName,
+ program.verbose,
+ program.scriptsVersion,
+ program.template,
+ program.useNpm,
+ program.usePnp
+);
+
+function createApp(name, verbose, version, template, useNpm, usePnp) {
+ const unsupportedNodeVersion = !semver.satisfies(process.version, '>=10');
+ if (unsupportedNodeVersion) {
+ console.log(
+ chalk.yellow(
+ `You are using Node ${process.version} so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
+ `Please update to Node 10 or higher for a better, fully supported experience.\n`
+ )
+ );
+ // Fall back to latest supported react-scripts on Node 4
+ version = 'react-scripts@0.9.x';
+ }
+
+ const root = path.resolve(name);
+ const appName = path.basename(root);
+
+ checkAppName(appName);
+ fs.ensureDirSync(name);
+ if (!isSafeToCreateProjectIn(root, name)) {
+ process.exit(1);
+ }
+ console.log();
+
+ console.log(`Creating a new React app in ${chalk.green(root)}.`);
+ console.log();
+
+ const packageJson = {
+ name: appName,
+ version: '0.1.0',
+ private: true,
+ };
+ fs.writeFileSync(
+ path.join(root, 'package.json'),
+ JSON.stringify(packageJson, null, 2) + os.EOL
+ );
+
+ const useYarn = useNpm ? false : shouldUseYarn();
+ const originalDirectory = process.cwd();
+ process.chdir(root);
+ if (!useYarn && !checkThatNpmCanReadCwd()) {
+ process.exit(1);
+ }
+
+ if (!useYarn) {
+ const npmInfo = checkNpmVersion();
+ if (!npmInfo.hasMinNpm) {
+ if (npmInfo.npmVersion) {
+ console.log(
+ chalk.yellow(
+ `You are using npm ${npmInfo.npmVersion} so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
+ `Please update to npm 6 or higher for a better, fully supported experience.\n`
+ )
+ );
+ }
+ // Fall back to latest supported react-scripts for npm 3
+ version = 'react-scripts@0.9.x';
+ }
+ } else if (usePnp) {
+ const yarnInfo = checkYarnVersion();
+ if (yarnInfo.yarnVersion) {
+ if (!yarnInfo.hasMinYarnPnp) {
+ console.log(
+ chalk.yellow(
+ `You are using Yarn ${yarnInfo.yarnVersion} together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
+ `Please update to Yarn 1.12 or higher for a better, fully supported experience.\n`
+ )
+ );
+ // 1.11 had an issue with webpack-dev-middleware, so better not use PnP with it (never reached stable, but still)
+ usePnp = false;
+ }
+ if (!yarnInfo.hasMaxYarnPnp) {
+ console.log(
+ chalk.yellow(
+ 'The --use-pnp flag is no longer necessary with yarn 2 and will be deprecated and removed in a future release.\n'
+ )
+ );
+ // 2 supports PnP by default and breaks when trying to use the flag
+ usePnp = false;
+ }
+ }
+ }
+
+ if (useYarn) {
+ let yarnUsesDefaultRegistry = true;
+ try {
+ yarnUsesDefaultRegistry =
+ execSync('yarnpkg config get registry').toString().trim() ===
+ 'https://registry.yarnpkg.com';
+ } catch (e) {
+ // ignore
+ }
+ if (yarnUsesDefaultRegistry) {
+ fs.copySync(
+ require.resolve('./yarn.lock.cached'),
+ path.join(root, 'yarn.lock')
+ );
+ }
+ }
+
+ run(
+ root,
+ appName,
+ version,
+ verbose,
+ originalDirectory,
+ template,
+ useYarn,
+ usePnp
+ );
+}
+
+function shouldUseYarn() {
+ try {
+ execSync('yarnpkg --version', { stdio: 'ignore' });
+ return true;
+ } catch (e) {
+ return false;
+ }
+}
+
+function install(root, useYarn, usePnp, dependencies, verbose, isOnline) {
+ return new Promise((resolve, reject) => {
+ let command;
+ let args;
+ if (useYarn) {
+ command = 'yarnpkg';
+ args = ['add', '--exact'];
+ if (!isOnline) {
+ args.push('--offline');
+ }
+ if (usePnp) {
+ args.push('--enable-pnp');
+ }
+ [].push.apply(args, dependencies);
+
+ // Explicitly set cwd() to work around issues like
+ // https://github.com/facebook/create-react-app/issues/3326.
+ // Unfortunately we can only do this for Yarn because npm support for
+ // equivalent --prefix flag doesn't help with this issue.
+ // This is why for npm, we run checkThatNpmCanReadCwd() early instead.
+ args.push('--cwd');
+ args.push(root);
+
+ if (!isOnline) {
+ console.log(chalk.yellow('You appear to be offline.'));
+ console.log(chalk.yellow('Falling back to the local Yarn cache.'));
+ console.log();
+ }
+ } else {
+ command = 'npm';
+ args = [
+ 'install',
+ '--save',
+ '--save-exact',
+ '--loglevel',
+ 'error',
+ ].concat(dependencies);
+
+ if (usePnp) {
+ console.log(chalk.yellow("NPM doesn't support PnP."));
+ console.log(chalk.yellow('Falling back to the regular installs.'));
+ console.log();
+ }
+ }
+
+ if (verbose) {
+ args.push('--verbose');
+ }
+
+ const child = spawn(command, args, { stdio: 'inherit' });
+ child.on('close', code => {
+ if (code !== 0) {
+ reject({
+ command: `${command} ${args.join(' ')}`,
+ });
+ return;
+ }
+ resolve();
+ });
+ });
+}
+
+function run(
+ root,
+ appName,
+ version,
+ verbose,
+ originalDirectory,
+ template,
+ useYarn,
+ usePnp
+) {
+ Promise.all([
+ getInstallPackage(version, originalDirectory),
+ getTemplateInstallPackage(template, originalDirectory),
+ ]).then(([packageToInstall, templateToInstall]) => {
+ const allDependencies = ['react', 'react-dom', packageToInstall];
+
+ console.log('Installing packages. This might take a couple of minutes.');
+
+ Promise.all([
+ getPackageInfo(packageToInstall),
+ getPackageInfo(templateToInstall),
+ ])
+ .then(([packageInfo, templateInfo]) =>
+ checkIfOnline(useYarn).then(isOnline => ({
+ isOnline,
+ packageInfo,
+ templateInfo,
+ }))
+ )
+ .then(({ isOnline, packageInfo, templateInfo }) => {
+ let packageVersion = semver.coerce(packageInfo.version);
+
+ const templatesVersionMinimum = '3.3.0';
+
+ // Assume compatibility if we can't test the version.
+ if (!semver.valid(packageVersion)) {
+ packageVersion = templatesVersionMinimum;
+ }
+
+ // Only support templates when used alongside new react-scripts versions.
+ const supportsTemplates = semver.gte(
+ packageVersion,
+ templatesVersionMinimum
+ );
+ if (supportsTemplates) {
+ allDependencies.push(templateToInstall);
+ } else if (template) {
+ console.log('');
+ console.log(
+ `The ${chalk.cyan(packageInfo.name)} version you're using ${
+ packageInfo.name === 'react-scripts' ? 'is not' : 'may not be'
+ } compatible with the ${chalk.cyan('--template')} option.`
+ );
+ console.log('');
+ }
+
+ console.log(
+ `Installing ${chalk.cyan('react')}, ${chalk.cyan(
+ 'react-dom'
+ )}, and ${chalk.cyan(packageInfo.name)}${
+ supportsTemplates ? ` with ${chalk.cyan(templateInfo.name)}` : ''
+ }...`
+ );
+ console.log();
+
+ return install(
+ root,
+ useYarn,
+ usePnp,
+ allDependencies,
+ verbose,
+ isOnline
+ ).then(() => ({
+ packageInfo,
+ supportsTemplates,
+ templateInfo,
+ }));
+ })
+ .then(async ({ packageInfo, supportsTemplates, templateInfo }) => {
+ const packageName = packageInfo.name;
+ const templateName = supportsTemplates ? templateInfo.name : undefined;
+ checkNodeVersion(packageName);
+ setCaretRangeForRuntimeDeps(packageName);
+
+ const pnpPath = path.resolve(process.cwd(), '.pnp.js');
+
+ const nodeArgs = fs.existsSync(pnpPath) ? ['--require', pnpPath] : [];
+
+ await executeNodeScript(
+ {
+ cwd: process.cwd(),
+ args: nodeArgs,
+ },
+ [root, appName, verbose, originalDirectory, templateName],
+ `
+ var init = require('${packageName}/scripts/init.js');
+ init.apply(null, JSON.parse(process.argv[1]));
+ `
+ );
+
+ if (version === 'react-scripts@0.9.x') {
+ console.log(
+ chalk.yellow(
+ `\nNote: the project was bootstrapped with an old unsupported version of tools.\n` +
+ `Please update to Node >=10 and npm >=6 to get supported tools in new projects.\n`
+ )
+ );
+ }
+ })
+ .catch(reason => {
+ console.log();
+ console.log('Aborting installation.');
+ if (reason.command) {
+ console.log(` ${chalk.cyan(reason.command)} has failed.`);
+ } else {
+ console.log(
+ chalk.red('Unexpected error. Please report it as a bug:')
+ );
+ console.log(reason);
+ }
+ console.log();
+
+ // On 'exit' we will delete these files from target directory.
+ const knownGeneratedFiles = [
+ 'package.json',
+ 'yarn.lock',
+ 'node_modules',
+ ];
+ const currentFiles = fs.readdirSync(path.join(root));
+ currentFiles.forEach(file => {
+ knownGeneratedFiles.forEach(fileToMatch => {
+ // This removes all knownGeneratedFiles.
+ if (file === fileToMatch) {
+ console.log(`Deleting generated file... ${chalk.cyan(file)}`);
+ fs.removeSync(path.join(root, file));
+ }
+ });
+ });
+ const remainingFiles = fs.readdirSync(path.join(root));
+ if (!remainingFiles.length) {
+ // Delete target folder if empty
+ console.log(
+ `Deleting ${chalk.cyan(`${appName}/`)} from ${chalk.cyan(
+ path.resolve(root, '..')
+ )}`
+ );
+ process.chdir(path.resolve(root, '..'));
+ fs.removeSync(path.join(root));
+ }
+ console.log('Done.');
+ process.exit(1);
+ });
+ });
+}
+
+function getInstallPackage(version, originalDirectory) {
+ let packageToInstall = 'react-scripts';
+ const validSemver = semver.valid(version);
+ if (validSemver) {
+ packageToInstall += `@${validSemver}`;
+ } else if (version) {
+ if (version[0] === '@' && !version.includes('/')) {
+ packageToInstall += version;
+ } else if (version.match(/^file:/)) {
+ packageToInstall = `file:${path.resolve(
+ originalDirectory,
+ version.match(/^file:(.*)?$/)[1]
+ )}`;
+ } else {
+ // for tar.gz or alternative paths
+ packageToInstall = version;
+ }
+ }
+
+ const scriptsToWarn = [
+ {
+ name: 'react-scripts-ts',
+ message: chalk.yellow(
+ `The react-scripts-ts package is deprecated. TypeScript is now supported natively in Create React App. You can use the ${chalk.green(
+ '--template typescript'
+ )} option instead when generating your app to include TypeScript support. Would you like to continue using react-scripts-ts?`
+ ),
+ },
+ ];
+
+ for (const script of scriptsToWarn) {
+ if (packageToInstall.startsWith(script.name)) {
+ return inquirer
+ .prompt({
+ type: 'confirm',
+ name: 'useScript',
+ message: script.message,
+ default: false,
+ })
+ .then(answer => {
+ if (!answer.useScript) {
+ process.exit(0);
+ }
+
+ return packageToInstall;
+ });
+ }
+ }
+
+ return Promise.resolve(packageToInstall);
+}
+
+function getTemplateInstallPackage(template, originalDirectory) {
+ let templateToInstall = 'cra-template';
+ if (template) {
+ if (template.match(/^file:/)) {
+ templateToInstall = `file:${path.resolve(
+ originalDirectory,
+ template.match(/^file:(.*)?$/)[1]
+ )}`;
+ } else if (
+ template.includes('://') ||
+ template.match(/^.+\.(tgz|tar\.gz)$/)
+ ) {
+ // for tar.gz or alternative paths
+ templateToInstall = template;
+ } else {
+ // Add prefix 'cra-template-' to non-prefixed templates, leaving any
+ // @scope/ intact.
+ const packageMatch = template.match(/^(@[^/]+\/)?(.+)$/);
+ const scope = packageMatch[1] || '';
+ const templateName = packageMatch[2];
+
+ if (
+ templateName === templateToInstall ||
+ templateName.startsWith(`${templateToInstall}-`)
+ ) {
+ // Covers:
+ // - cra-template
+ // - @SCOPE/cra-template
+ // - cra-template-NAME
+ // - @SCOPE/cra-template-NAME
+ templateToInstall = `${scope}${templateName}`;
+ } else if (templateName.startsWith('@')) {
+ // Covers using @SCOPE only
+ templateToInstall = `${templateName}/${templateToInstall}`;
+ } else {
+ // Covers templates without the `cra-template` prefix:
+ // - NAME
+ // - @SCOPE/NAME
+ templateToInstall = `${scope}${templateToInstall}-${templateName}`;
+ }
+ }
+ }
+
+ return Promise.resolve(templateToInstall);
+}
+
+function getTemporaryDirectory() {
+ return new Promise((resolve, reject) => {
+ // Unsafe cleanup lets us recursively delete the directory if it contains
+ // contents; by default it only allows removal if it's empty
+ tmp.dir({ unsafeCleanup: true }, (err, tmpdir, callback) => {
+ if (err) {
+ reject(err);
+ } else {
+ resolve({
+ tmpdir: tmpdir,
+ cleanup: () => {
+ try {
+ callback();
+ } catch (ignored) {
+ // Callback might throw and fail, since it's a temp directory the
+ // OS will clean it up eventually...
+ }
+ },
+ });
+ }
+ });
+ });
+}
+
+function extractStream(stream, dest) {
+ return new Promise((resolve, reject) => {
+ stream.pipe(
+ unpack(dest, err => {
+ if (err) {
+ reject(err);
+ } else {
+ resolve(dest);
+ }
+ })
+ );
+ });
+}
+
+// Extract package name from tarball url or path.
+function getPackageInfo(installPackage) {
+ if (installPackage.match(/^.+\.(tgz|tar\.gz)$/)) {
+ return getTemporaryDirectory()
+ .then(obj => {
+ let stream;
+ if (/^http/.test(installPackage)) {
+ stream = hyperquest(installPackage);
+ } else {
+ stream = fs.createReadStream(installPackage);
+ }
+ return extractStream(stream, obj.tmpdir).then(() => obj);
+ })
+ .then(obj => {
+ const { name, version } = require(path.join(
+ obj.tmpdir,
+ 'package.json'
+ ));
+ obj.cleanup();
+ return { name, version };
+ })
+ .catch(err => {
+ // The package name could be with or without semver version, e.g. react-scripts-0.2.0-alpha.1.tgz
+ // However, this function returns package name only without semver version.
+ console.log(
+ `Could not extract the package name from the archive: ${err.message}`
+ );
+ const assumedProjectName = installPackage.match(
+ /^.+\/(.+?)(?:-\d+.+)?\.(tgz|tar\.gz)$/
+ )[1];
+ console.log(
+ `Based on the filename, assuming it is "${chalk.cyan(
+ assumedProjectName
+ )}"`
+ );
+ return Promise.resolve({ name: assumedProjectName });
+ });
+ } else if (installPackage.startsWith('git+')) {
+ // Pull package name out of git urls e.g:
+ // git+https://github.com/mycompany/react-scripts.git
+ // git+ssh://github.com/mycompany/react-scripts.git#v1.2.3
+ return Promise.resolve({
+ name: installPackage.match(/([^/]+)\.git(#.*)?$/)[1],
+ });
+ } else if (installPackage.match(/.+@/)) {
+ // Do not match @scope/ when stripping off @version or @tag
+ return Promise.resolve({
+ name: installPackage.charAt(0) + installPackage.substr(1).split('@')[0],
+ version: installPackage.split('@')[1],
+ });
+ } else if (installPackage.match(/^file:/)) {
+ const installPackagePath = installPackage.match(/^file:(.*)?$/)[1];
+ const { name, version } = require(path.join(
+ installPackagePath,
+ 'package.json'
+ ));
+ return Promise.resolve({ name, version });
+ }
+ return Promise.resolve({ name: installPackage });
+}
+
+function checkNpmVersion() {
+ let hasMinNpm = false;
+ let npmVersion = null;
+ try {
+ npmVersion = execSync('npm --version').toString().trim();
+ hasMinNpm = semver.gte(npmVersion, '6.0.0');
+ } catch (err) {
+ // ignore
+ }
+ return {
+ hasMinNpm: hasMinNpm,
+ npmVersion: npmVersion,
+ };
+}
+
+function checkYarnVersion() {
+ const minYarnPnp = '1.12.0';
+ const maxYarnPnp = '2.0.0';
+ let hasMinYarnPnp = false;
+ let hasMaxYarnPnp = false;
+ let yarnVersion = null;
+ try {
+ yarnVersion = execSync('yarnpkg --version').toString().trim();
+ if (semver.valid(yarnVersion)) {
+ hasMinYarnPnp = semver.gte(yarnVersion, minYarnPnp);
+ hasMaxYarnPnp = semver.lt(yarnVersion, maxYarnPnp);
+ } else {
+ // Handle non-semver compliant yarn version strings, which yarn currently
+ // uses for nightly builds. The regex truncates anything after the first
+ // dash. See #5362.
+ const trimmedYarnVersionMatch = /^(.+?)[-+].+$/.exec(yarnVersion);
+ if (trimmedYarnVersionMatch) {
+ const trimmedYarnVersion = trimmedYarnVersionMatch.pop();
+ hasMinYarnPnp = semver.gte(trimmedYarnVersion, minYarnPnp);
+ hasMaxYarnPnp = semver.lt(trimmedYarnVersion, maxYarnPnp);
+ }
+ }
+ } catch (err) {
+ // ignore
+ }
+ return {
+ hasMinYarnPnp: hasMinYarnPnp,
+ hasMaxYarnPnp: hasMaxYarnPnp,
+ yarnVersion: yarnVersion,
+ };
+}
+
+function checkNodeVersion(packageName) {
+ const packageJsonPath = path.resolve(
+ process.cwd(),
+ 'node_modules',
+ packageName,
+ 'package.json'
+ );
+
+ if (!fs.existsSync(packageJsonPath)) {
+ return;
+ }
+
+ const packageJson = require(packageJsonPath);
+ if (!packageJson.engines || !packageJson.engines.node) {
+ return;
+ }
+
+ if (!semver.satisfies(process.version, packageJson.engines.node)) {
+ console.error(
+ chalk.red(
+ 'You are running Node %s.\n' +
+ 'Create React App requires Node %s or higher. \n' +
+ 'Please update your version of Node.'
+ ),
+ process.version,
+ packageJson.engines.node
+ );
+ process.exit(1);
+ }
+}
+
+function checkAppName(appName) {
+ const validationResult = validateProjectName(appName);
+ if (!validationResult.validForNewPackages) {
+ console.error(
+ chalk.red(
+ `Cannot create a project named ${chalk.green(
+ `"${appName}"`
+ )} because of npm naming restrictions:\n`
+ )
+ );
+ [
+ ...(validationResult.errors || []),
+ ...(validationResult.warnings || []),
+ ].forEach(error => {
+ console.error(chalk.red(` * ${error}`));
+ });
+ console.error(chalk.red('\nPlease choose a different project name.'));
+ process.exit(1);
+ }
+
+ // TODO: there should be a single place that holds the dependencies
+ const dependencies = ['react', 'react-dom', 'react-scripts'].sort();
+ if (dependencies.includes(appName)) {
+ console.error(
+ chalk.red(
+ `Cannot create a project named ${chalk.green(
+ `"${appName}"`
+ )} because a dependency with the same name exists.\n` +
+ `Due to the way npm works, the following names are not allowed:\n\n`
+ ) +
+ chalk.cyan(dependencies.map(depName => ` ${depName}`).join('\n')) +
+ chalk.red('\n\nPlease choose a different project name.')
+ );
+ process.exit(1);
+ }
+}
+
+function makeCaretRange(dependencies, name) {
+ const version = dependencies[name];
+
+ if (typeof version === 'undefined') {
+ console.error(chalk.red(`Missing ${name} dependency in package.json`));
+ process.exit(1);
+ }
+
+ let patchedVersion = `^${version}`;
+
+ if (!semver.validRange(patchedVersion)) {
+ console.error(
+ `Unable to patch ${name} dependency version because version ${chalk.red(
+ version
+ )} will become invalid ${chalk.red(patchedVersion)}`
+ );
+ patchedVersion = version;
+ }
+
+ dependencies[name] = patchedVersion;
+}
+
+function setCaretRangeForRuntimeDeps(packageName) {
+ const packagePath = path.join(process.cwd(), 'package.json');
+ const packageJson = require(packagePath);
+
+ if (typeof packageJson.dependencies === 'undefined') {
+ console.error(chalk.red('Missing dependencies in package.json'));
+ process.exit(1);
+ }
+
+ const packageVersion = packageJson.dependencies[packageName];
+ if (typeof packageVersion === 'undefined') {
+ console.error(chalk.red(`Unable to find ${packageName} in package.json`));
+ process.exit(1);
+ }
+
+ makeCaretRange(packageJson.dependencies, 'react');
+ makeCaretRange(packageJson.dependencies, 'react-dom');
+
+ fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2) + os.EOL);
+}
+
+// If project only contains files generated by GH, it’s safe.
+// Also, if project contains remnant error logs from a previous
+// installation, lets remove them now.
+// We also special case IJ-based products .idea because it integrates with CRA:
+// https://github.com/facebook/create-react-app/pull/368#issuecomment-243446094
+function isSafeToCreateProjectIn(root, name) {
+ const validFiles = [
+ '.DS_Store',
+ '.git',
+ '.gitattributes',
+ '.gitignore',
+ '.gitlab-ci.yml',
+ '.hg',
+ '.hgcheck',
+ '.hgignore',
+ '.idea',
+ '.npmignore',
+ '.travis.yml',
+ 'docs',
+ 'LICENSE',
+ 'README.md',
+ 'mkdocs.yml',
+ 'Thumbs.db',
+ ];
+ // These files should be allowed to remain on a failed install, but then
+ // silently removed during the next create.
+ const errorLogFilePatterns = [
+ 'npm-debug.log',
+ 'yarn-error.log',
+ 'yarn-debug.log',
+ ];
+ const isErrorLog = file => {
+ return errorLogFilePatterns.some(pattern => file.startsWith(pattern));
+ };
+
+ const conflicts = fs
+ .readdirSync(root)
+ .filter(file => !validFiles.includes(file))
+ // IntelliJ IDEA creates module files before CRA is launched
+ .filter(file => !/\.iml$/.test(file))
+ // Don't treat log files from previous installation as conflicts
+ .filter(file => !isErrorLog(file));
+
+ if (conflicts.length > 0) {
+ console.log(
+ `The directory ${chalk.green(name)} contains files that could conflict:`
+ );
+ console.log();
+ for (const file of conflicts) {
+ try {
+ const stats = fs.lstatSync(path.join(root, file));
+ if (stats.isDirectory()) {
+ console.log(` ${chalk.blue(`${file}/`)}`);
+ } else {
+ console.log(` ${file}`);
+ }
+ } catch (e) {
+ console.log(` ${file}`);
+ }
+ }
+ console.log();
+ console.log(
+ 'Either try using a new directory name, or remove the files listed above.'
+ );
+
+ return false;
+ }
+
+ // Remove any log files from a previous installation.
+ fs.readdirSync(root).forEach(file => {
+ if (isErrorLog(file)) {
+ fs.removeSync(path.join(root, file));
+ }
+ });
+ return true;
+}
+
+function getProxy() {
+ if (process.env.https_proxy) {
+ return process.env.https_proxy;
+ } else {
+ try {
+ // Trying to read https-proxy from .npmrc
+ let httpsProxy = execSync('npm config get https-proxy').toString().trim();
+ return httpsProxy !== 'null' ? httpsProxy : undefined;
+ } catch (e) {
+ return;
+ }
+ }
+}
+
+// See https://github.com/facebook/create-react-app/pull/3355
+function checkThatNpmCanReadCwd() {
+ const cwd = process.cwd();
+ let childOutput = null;
+ try {
+ // Note: intentionally using spawn over exec since
+ // the problem doesn't reproduce otherwise.
+ // `npm config list` is the only reliable way I could find
+ // to reproduce the wrong path. Just printing process.cwd()
+ // in a Node process was not enough.
+ childOutput = spawn.sync('npm', ['config', 'list']).output.join('');
+ } catch (err) {
+ // Something went wrong spawning node.
+ // Not great, but it means we can't do this check.
+ // We might fail later on, but let's continue.
+ return true;
+ }
+ if (typeof childOutput !== 'string') {
+ return true;
+ }
+ const lines = childOutput.split('\n');
+ // `npm config list` output includes the following line:
+ // "; cwd = C:\path\to\current\dir" (unquoted)
+ // I couldn't find an easier way to get it.
+ const prefix = '; cwd = ';
+ const line = lines.find(line => line.startsWith(prefix));
+ if (typeof line !== 'string') {
+ // Fail gracefully. They could remove it.
+ return true;
+ }
+ const npmCWD = line.substring(prefix.length);
+ if (npmCWD === cwd) {
+ return true;
+ }
+ console.error(
+ chalk.red(
+ `Could not start an npm process in the right directory.\n\n` +
+ `The current directory is: ${chalk.bold(cwd)}\n` +
+ `However, a newly started npm process runs in: ${chalk.bold(
+ npmCWD
+ )}\n\n` +
+ `This is probably caused by a misconfigured system terminal shell.`
+ )
+ );
+ if (process.platform === 'win32') {
+ console.error(
+ chalk.red(`On Windows, this can usually be fixed by running:\n\n`) +
+ ` ${chalk.cyan(
+ 'reg'
+ )} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` +
+ ` ${chalk.cyan(
+ 'reg'
+ )} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` +
+ chalk.red(`Try to run the above two lines in the terminal.\n`) +
+ chalk.red(
+ `To learn more about this problem, read: https://blogs.msdn.microsoft.com/oldnewthing/20071121-00/?p=24433/`
+ )
+ );
+ }
+ return false;
+}
+
+function checkIfOnline(useYarn) {
+ if (!useYarn) {
+ // Don't ping the Yarn registry.
+ // We'll just assume the best case.
+ return Promise.resolve(true);
+ }
+
+ return new Promise(resolve => {
+ dns.lookup('registry.yarnpkg.com', err => {
+ let proxy;
+ if (err != null && (proxy = getProxy())) {
+ // If a proxy is defined, we likely can't resolve external hostnames.
+ // Try to resolve the proxy name as an indication of a connection.
+ dns.lookup(url.parse(proxy).hostname, proxyErr => {
+ resolve(proxyErr == null);
+ });
+ } else {
+ resolve(err == null);
+ }
+ });
+ });
+}
+
+function executeNodeScript({ cwd, args }, data, source) {
+ return new Promise((resolve, reject) => {
+ const child = spawn(
+ process.execPath,
+ [...args, '-e', source, '--', JSON.stringify(data)],
+ { cwd, stdio: 'inherit' }
+ );
+
+ child.on('close', code => {
+ if (code !== 0) {
+ reject({
+ command: `node ${args.join(' ')}`,
+ });
+ return;
+ }
+ resolve();
+ });
+ });
+}
diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js
new file mode 100755
index 00000000000..1e068819f48
--- /dev/null
+++ b/packages/create-react-app/index.js
@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright (c) 2015-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.
+ */
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// /!\ DO NOT MODIFY THIS FILE /!\
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+//
+// create-react-app is installed globally on people's computers. This means
+// that it is extremely difficult to have them upgrade the version and
+// because there's only one global version installed, it is very prone to
+// breaking changes.
+//
+// The only job of create-react-app is to init the repository and then
+// forward all the commands to the local version of create-react-app.
+//
+// If you need to add a new command, please add it to the scripts/ folder.
+//
+// The only reason to modify this file is to add more warnings and
+// troubleshooting information for the `create-react-app` command.
+//
+// Do not make breaking changes! We absolutely don't want to have to
+// tell people to update their global version of create-react-app.
+//
+// Also be careful with new language features.
+// This file must work on Node 0.10+.
+//
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// /!\ DO NOT MODIFY THIS FILE /!\
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+'use strict';
+
+var currentNodeVersion = process.versions.node;
+var semver = currentNodeVersion.split('.');
+var major = semver[0];
+
+if (major < 10) {
+ console.error(
+ 'You are running Node ' +
+ currentNodeVersion +
+ '.\n' +
+ 'Create React App requires Node 10 or higher. \n' +
+ 'Please update your version of Node.'
+ );
+ process.exit(1);
+}
+
+require('./createReactApp');
diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json
new file mode 100644
index 00000000000..c87ebe8462c
--- /dev/null
+++ b/packages/create-react-app/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "create-react-app",
+ "version": "3.4.1",
+ "keywords": [
+ "react"
+ ],
+ "description": "Create React apps with no build configuration.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/facebook/create-react-app.git",
+ "directory": "packages/create-react-app"
+ },
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ },
+ "bugs": {
+ "url": "https://github.com/facebook/create-react-app/issues"
+ },
+ "files": [
+ "index.js",
+ "createReactApp.js",
+ "yarn.lock.cached"
+ ],
+ "bin": {
+ "create-react-app": "./index.js"
+ },
+ "dependencies": {
+ "chalk": "4.1.0",
+ "commander": "4.1.0",
+ "cross-spawn": "7.0.3",
+ "envinfo": "7.5.1",
+ "fs-extra": "9.0.1",
+ "hyperquest": "2.1.3",
+ "inquirer": "7.2.0",
+ "semver": "7.3.2",
+ "tar-pack": "3.4.1",
+ "tmp": "0.2.1",
+ "validate-npm-package-name": "3.0.0"
+ }
+}
diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js
index 0d29e7995a6..5e5825e99ef 100644
--- a/packages/eslint-config-react-app/index.js
+++ b/packages/eslint-config-react-app/index.js
@@ -253,6 +253,7 @@ module.exports = {
// https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
'import/first': 'error',
'import/no-amd': 'error',
+ 'import/no-anonymous-default-export': 'warn',
'import/no-webpack-loader-syntax': 'error',
// https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json
index 14c11fa0f6f..b152abd36d9 100644
--- a/packages/eslint-config-react-app/package.json
+++ b/packages/eslint-config-react-app/package.json
@@ -15,17 +15,20 @@
"index.js"
],
"peerDependencies": {
- "@typescript-eslint/eslint-plugin": "2.x",
- "@typescript-eslint/parser": "2.x",
- "babel-eslint": "10.x",
- "eslint": "6.x",
- "eslint-plugin-flowtype": "3.x || 4.x",
- "eslint-plugin-import": "2.x",
- "eslint-plugin-jsx-a11y": "6.x",
- "eslint-plugin-react": "7.x",
- "eslint-plugin-react-hooks": "1.x || 2.x"
+ "@typescript-eslint/eslint-plugin": "^3.0.0",
+ "@typescript-eslint/parser": "^3.0.0",
+ "babel-eslint": "^10.0.0",
+ "eslint": "^7.0.0",
+ "eslint-plugin-flowtype": "^5.0.0",
+ "eslint-plugin-import": "^2.21.1",
+ "eslint-plugin-jsx-a11y": "^6.3.0",
+ "eslint-plugin-react": "^7.20.0",
+ "eslint-plugin-react-hooks": "^4.0.1"
},
"dependencies": {
"confusing-browser-globals": "^1.0.9"
+ },
+ "engines": {
+ "node": "^10.12.0 || >=12.0.0"
}
}
diff --git a/packages/react-app-polyfill/package.json b/packages/react-app-polyfill/package.json
index b48d4f185e1..21fc0986a5f 100644
--- a/packages/react-app-polyfill/package.json
+++ b/packages/react-app-polyfill/package.json
@@ -12,7 +12,7 @@
"url": "https://github.com/facebook/create-react-app/issues"
},
"engines": {
- "node": ">=6"
+ "node": ">=10"
},
"files": [
"ie9.js",
diff --git a/packages/react-app-polyfill/stable.js b/packages/react-app-polyfill/stable.js
index 6108630c7c0..7b8d0f53066 100644
--- a/packages/react-app-polyfill/stable.js
+++ b/packages/react-app-polyfill/stable.js
@@ -1,13 +1,13 @@
-/**
- * Copyright (c) 2015-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.
- */
-'use strict';
-
-// Polyfill stable language features.
-// It's recommended to use @babel/preset-env and browserslist
-// to only include the polyfills necessary for the target browsers.
-require('core-js/stable');
-require('regenerator-runtime/runtime');
+/**
+ * Copyright (c) 2015-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.
+ */
+'use strict';
+
+// Polyfill stable language features.
+// It's recommended to use @babel/preset-env and browserslist
+// to only include the polyfills necessary for the target browsers.
+require('core-js/stable');
+require('regenerator-runtime/runtime');
diff --git a/packages/react-dev-utils/ForkTsCheckerWebpackPlugin.js b/packages/react-dev-utils/ForkTsCheckerWebpackPlugin.js
index af728e84ff7..053df19eb92 100644
--- a/packages/react-dev-utils/ForkTsCheckerWebpackPlugin.js
+++ b/packages/react-dev-utils/ForkTsCheckerWebpackPlugin.js
@@ -1,12 +1,12 @@
-/**
- * Copyright (c) 2015-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.
- */
-
-'use strict';
-
-var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-module.exports = ForkTsCheckerWebpackPlugin;
+/**
+ * Copyright (c) 2015-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.
+ */
+
+'use strict';
+
+var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = ForkTsCheckerWebpackPlugin;
diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js
index 07a1ac873ee..a4aafedd0a1 100644
--- a/packages/react-dev-utils/WebpackDevServerUtils.js
+++ b/packages/react-dev-utils/WebpackDevServerUtils.js
@@ -420,7 +420,7 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
// Modern browsers include text/html into `accept` header when navigating.
// However API calls like `fetch()` won’t generally accept text/html.
// If this heuristic doesn’t work well for you, use `src/setupProxy.js`.
- context: function(pathname, req) {
+ context: function (pathname, req) {
return (
req.method !== 'GET' ||
(mayProxy(pathname) &&
diff --git a/packages/react-dev-utils/__tests__/getCSSModuleLocalIdent.test.js b/packages/react-dev-utils/__tests__/getCSSModuleLocalIdent.test.js
new file mode 100644
index 00000000000..da05d947da5
--- /dev/null
+++ b/packages/react-dev-utils/__tests__/getCSSModuleLocalIdent.test.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2015-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.
+ */
+
+'use strict';
+
+const getCSSModuleLocalIdent = require('../getCSSModuleLocalIdent');
+
+const rootContext = '/path';
+const defaultClassName = 'class';
+const options = { context: undefined, hashPrefix: '', regExp: null };
+
+const tests = [
+ {
+ resourcePath: '/path/to/file.module.css',
+ expected: 'file_class__13tFD',
+ },
+ {
+ resourcePath: '/path/to/file.module.scss',
+ expected: 'file_class__3lYUI',
+ },
+ {
+ resourcePath: '/path/to/file.module.sass',
+ expected: 'file_class__2KnOB',
+ },
+ {
+ resourcePath: '/path/to/file.name.module.css',
+ expected: 'file_name_class__1OzEh',
+ },
+];
+
+describe('getCSSModuleLocalIdent', () => {
+ tests.forEach(test => {
+ const { className = defaultClassName, expected, resourcePath } = test;
+ it(JSON.stringify({ resourcePath, className }), () => {
+ const ident = getCSSModuleLocalIdent(
+ {
+ resourcePath,
+ rootContext,
+ },
+ '[hash:base64]',
+ className,
+ options
+ );
+ expect(ident).toBe(expected);
+ });
+ });
+});
diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js
index b036776a772..a49718d8eee 100644
--- a/packages/react-dev-utils/formatWebpackMessages.js
+++ b/packages/react-dev-utils/formatWebpackMessages.js
@@ -106,10 +106,10 @@ function formatMessage(message) {
}
function formatWebpackMessages(json) {
- const formattedErrors = json.errors.map(function(message) {
+ const formattedErrors = json.errors.map(function (message) {
return formatMessage(message, true);
});
- const formattedWarnings = json.warnings.map(function(message) {
+ const formattedWarnings = json.warnings.map(function (message) {
return formatMessage(message, false);
});
const result = { errors: formattedErrors, warnings: formattedWarnings };
diff --git a/packages/react-dev-utils/getCSSModuleLocalIdent.js b/packages/react-dev-utils/getCSSModuleLocalIdent.js
index 1b1ecf7695b..ce25305e7ef 100644
--- a/packages/react-dev-utils/getCSSModuleLocalIdent.js
+++ b/packages/react-dev-utils/getCSSModuleLocalIdent.js
@@ -35,6 +35,6 @@ module.exports = function getLocalIdent(
fileNameOrFolder + '_' + localName + '__' + hash,
options
);
- // remove the .module that appears in every classname when based on the file.
- return className.replace('.module_', '_');
+ // Remove the .module that appears in every classname when based on the file and replace all "." with "_".
+ return className.replace('.module_', '_').replace(/\./g, '_');
};
diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js
index e7f9aa15d5d..3f298f6cf2b 100644
--- a/packages/react-dev-utils/launchEditor.js
+++ b/packages/react-dev-utils/launchEditor.js
@@ -383,7 +383,7 @@ function launchEditor(fileName, lineNumber, colNumber) {
} else {
_childProcess = child_process.spawn(editor, args, { stdio: 'inherit' });
}
- _childProcess.on('exit', function(errorCode) {
+ _childProcess.on('exit', function (errorCode) {
_childProcess = null;
if (errorCode) {
@@ -391,7 +391,7 @@ function launchEditor(fileName, lineNumber, colNumber) {
}
});
- _childProcess.on('error', function(error) {
+ _childProcess.on('error', function (error) {
printInstructions(fileName, error.message);
});
}
diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js
index a84326038c7..babdc9b854e 100644
--- a/packages/react-dev-utils/openBrowser.js
+++ b/packages/react-dev-utils/openBrowser.js
@@ -45,7 +45,7 @@ function getBrowserEnv() {
function executeNodeScript(scriptPath, url) {
const extraArgs = process.argv.slice(2);
- const child = spawn('node', [scriptPath, ...extraArgs, url], {
+ const child = spawn(process.execPath, [scriptPath, ...extraArgs, url], {
stdio: 'inherit',
});
child.on('close', code => {
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 36ea5b34047..ead4212c9a8 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -12,7 +12,7 @@
"url": "https://github.com/facebook/create-react-app/issues"
},
"engines": {
- "node": ">=8.10"
+ "node": ">=10"
},
"files": [
"browsersHelper.js",
@@ -52,23 +52,23 @@
"webpackHotDevClient.js"
],
"dependencies": {
- "@babel/code-frame": "7.8.3",
+ "@babel/code-frame": "7.10.3",
"address": "1.1.2",
- "browserslist": "4.10.0",
+ "browserslist": "4.12.0",
"chalk": "2.4.2",
- "cross-spawn": "7.0.1",
+ "cross-spawn": "7.0.3",
"detect-port-alt": "1.1.6",
"escape-string-regexp": "2.0.0",
- "filesize": "6.0.1",
+ "filesize": "6.1.0",
"find-up": "4.1.0",
- "fork-ts-checker-webpack-plugin": "3.1.1",
+ "fork-ts-checker-webpack-plugin": "4.1.6",
"global-modules": "2.0.0",
- "globby": "8.0.2",
+ "globby": "11.0.1",
"gzip-size": "5.1.1",
"immer": "1.10.0",
- "inquirer": "7.0.4",
+ "inquirer": "7.2.0",
"is-root": "2.1.0",
- "loader-utils": "1.2.3",
+ "loader-utils": "2.0.0",
"open": "^7.0.2",
"pkg-up": "3.1.0",
"react-error-overlay": "^6.0.7",
@@ -78,8 +78,8 @@
"text-table": "0.2.0"
},
"devDependencies": {
- "cross-env": "^6.0.3",
- "jest": "24.9.0"
+ "cross-env": "^7.0.2",
+ "jest": "26.0.1"
},
"scripts": {
"test": "cross-env FORCE_COLOR=true jest"
diff --git a/packages/react-dev-utils/printBuildError.js b/packages/react-dev-utils/printBuildError.js
index 28f0de0cd9e..c0cd9c39f23 100644
--- a/packages/react-dev-utils/printBuildError.js
+++ b/packages/react-dev-utils/printBuildError.js
@@ -37,7 +37,7 @@ module.exports = function printBuildError(err) {
} catch (ignored) {
console.log('Failed to minify the bundle.', err);
}
- console.log('Read more here: https://bit.ly/CRA-build-minify');
+ console.log('Read more here: https://cra.link/failed-to-minify');
} else {
console.log((message || err) + '\n');
}
diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js
index 625e9911150..49433f71edd 100644
--- a/packages/react-dev-utils/printHostingInstructions.js
+++ b/packages/react-dev-utils/printHostingInstructions.js
@@ -41,7 +41,7 @@ function printHostingInstructions(
console.log();
console.log('Find out more about deployment here:');
console.log();
- console.log(` ${chalk.yellow('bit.ly/CRA-deploy')}`);
+ console.log(` ${chalk.yellow('https://cra.link/deployment')}`);
console.log();
}
diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js
index dc2f85d2e3e..1fb1276c6bd 100644
--- a/packages/react-dev-utils/typescriptFormatter.js
+++ b/packages/react-dev-utils/typescriptFormatter.js
@@ -12,45 +12,31 @@ const codeFrame = require('@babel/code-frame').codeFrameColumns;
const chalk = require('chalk');
const fs = require('fs');
-const types = { diagnostic: 'TypeScript', lint: 'TSLint' };
-
-function formatter(message, useColors) {
- const { type, severity, file, line, content, code, character } =
- typeof message.getFile === 'function'
- ? {
- type: message.getType(),
- severity: message.getSeverity(),
- file: message.getFile(),
- line: message.getLine(),
- content: message.getContent(),
- code: message.getCode(),
- character: message.getCharacter(),
- }
- : message;
-
- const colors = new chalk.constructor({ enabled: useColors });
- const messageColor = message.isWarningSeverity() ? colors.yellow : colors.red;
+const issueOrigins = {
+ typescript: 'TypeScript',
+ internal: 'fork-ts-checker-webpack-plugin',
+};
+
+function formatter(issue) {
+ const { origin, severity, file, line, message, code, character } = issue;
+
+ const colors = new chalk.constructor();
+ const messageColor = severity === 'warning' ? colors.yellow : colors.red;
const fileAndNumberColor = colors.bold.cyan;
const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8');
const frame = source
- ? codeFrame(
- source,
- { start: { line: line, column: character } },
- { highlightCode: useColors }
- )
+ ? codeFrame(source, { start: { line: line, column: character } })
.split('\n')
.map(str => ' ' + str)
.join(os.EOL)
: '';
return [
- messageColor.bold(`${types[type]} ${severity.toLowerCase()} in `) +
+ messageColor.bold(`${issueOrigins[origin]} ${severity.toLowerCase()} in `) +
fileAndNumberColor(`${file}(${line},${character})`) +
messageColor(':'),
- content +
- ' ' +
- messageColor.underline((type === 'lint' ? 'Rule: ' : 'TS') + code),
+ message + ' ' + messageColor.underline(`TS${code}`),
'',
frame,
].join(os.EOL);
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 0379358fb99..f9d814fdd11 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -43,14 +43,14 @@ ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
// See https://github.com/facebook/create-react-app/issues/3096
var hadRuntimeError = false;
ErrorOverlay.startReportingRuntimeErrors({
- onError: function() {
+ onError: function () {
hadRuntimeError = true;
},
filename: '/static/js/bundle.js',
});
if (module.hot && typeof module.hot.dispose === 'function') {
- module.hot.dispose(function() {
+ module.hot.dispose(function () {
// TODO: why do we need this?
ErrorOverlay.stopReportingRuntimeErrors();
});
@@ -71,7 +71,7 @@ var connection = new WebSocket(
// Unlike WebpackDevServer client, we won't try to reconnect
// to avoid spamming the console. Disconnect usually happens
// when developer stops the server.
-connection.onclose = function() {
+connection.onclose = function () {
if (typeof console !== 'undefined' && typeof console.info === 'function') {
console.info(
'The development server has disconnected.\nRefresh the page if necessary.'
@@ -192,7 +192,7 @@ function handleAvailableHash(hash) {
}
// Handle messages from the server.
-connection.onmessage = function(e) {
+connection.onmessage = function (e) {
var message = JSON.parse(e.data);
switch (message.type) {
case 'hash':
@@ -268,10 +268,10 @@ function tryApplyUpdates(onHotUpdateSuccess) {
// // webpack 2 returns a Promise instead of invoking a callback
if (result && result.then) {
result.then(
- function(updatedModules) {
+ function (updatedModules) {
handleApplyUpdates(null, updatedModules);
},
- function(err) {
+ function (err) {
handleApplyUpdates(err, null);
}
);
diff --git a/packages/react-error-overlay/build.js b/packages/react-error-overlay/build.js
index 592da141ffe..ccb9d08aa4e 100644
--- a/packages/react-error-overlay/build.js
+++ b/packages/react-error-overlay/build.js
@@ -77,7 +77,7 @@ function setupWatch() {
runBuildSteps();
});
- process.on('SIGINT', function() {
+ process.on('SIGINT', function () {
watcher.close();
process.exit(0);
});
diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
index d3455b42347..9f18b801e47 100644
--- a/packages/react-error-overlay/package.json
+++ b/packages/react-error-overlay/package.json
@@ -34,36 +34,37 @@
"lib/index.js"
],
"devDependencies": {
- "@babel/code-frame": "7.8.3",
- "@babel/core": "7.9.0",
+ "@babel/code-frame": "7.10.3",
+ "@babel/core": "7.10.3",
"anser": "1.4.9",
- "babel-eslint": "10.1.0",
- "babel-jest": "^24.9.0",
+ "babel-eslint": "^10.1.0",
+ "babel-jest": "^26.0.1",
"babel-loader": "8.1.0",
"babel-preset-react-app": "^9.1.2",
"chalk": "2.4.2",
"chokidar": "^3.3.0",
- "cross-env": "6.0.3",
- "eslint": "^6.1.0",
+ "cross-env": "7.0.2",
+ "eslint": "^7.3.0",
"eslint-config-react-app": "^5.2.1",
- "eslint-plugin-flowtype": "4.5.2",
- "eslint-plugin-import": "2.20.1",
- "eslint-plugin-jsx-a11y": "6.2.3",
- "eslint-plugin-react": "7.19.0",
+ "eslint-plugin-flowtype": "^5.1.3",
+ "eslint-plugin-import": "^2.21.2",
+ "eslint-plugin-jsx-a11y": "^6.3.1",
+ "eslint-plugin-react": "^7.20.0",
+ "eslint-plugin-react-hooks": "^4.0.4",
"flow-bin": "^0.116.0",
- "html-entities": "1.2.1",
- "jest": "24.9.0",
+ "html-entities": "1.3.1",
+ "jest": "26.0.1",
"jest-fetch-mock": "2.1.2",
"object-assign": "4.1.1",
- "promise": "8.0.3",
- "raw-loader": "^3.1.0",
+ "promise": "8.1.0",
+ "raw-loader": "^4.0.1",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.12.0",
"rimraf": "^3.0.0",
"settle-promise": "1.0.0",
"source-map": "0.5.6",
- "terser-webpack-plugin": "2.3.5",
+ "terser-webpack-plugin": "3.0.6",
"webpack": "^4.35.0"
},
"jest": {
diff --git a/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js b/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js
index ed07e5c7999..9b4242e6a8f 100644
--- a/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js
+++ b/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js
@@ -32,7 +32,7 @@ function StackFrameCodeBlock(props: Exact) {
const { lines, lineNum, columnNum, contextSize, main } = props;
const sourceCode = [];
let whiteSpace = Infinity;
- lines.forEach(function(e) {
+ lines.forEach(function (e) {
const { content: text } = e;
const m = text.match(/^\s*/);
if (text === '') {
@@ -44,7 +44,7 @@ function StackFrameCodeBlock(props: Exact) {
whiteSpace = 0;
}
});
- lines.forEach(function(e) {
+ lines.forEach(function (e) {
let { content: text } = e;
const { lineNumber: line } = e;
diff --git a/packages/react-error-overlay/src/effects/proxyConsole.js b/packages/react-error-overlay/src/effects/proxyConsole.js
index db270e9ddef..bea45603794 100644
--- a/packages/react-error-overlay/src/effects/proxyConsole.js
+++ b/packages/react-error-overlay/src/effects/proxyConsole.js
@@ -57,7 +57,7 @@ const permanentRegister = function proxyConsole(
}
} catch (err) {
// Warnings must never crash. Rethrow with a clean stack.
- setTimeout(function() {
+ setTimeout(function () {
throw err;
});
}
diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js
index 55e59aeaf5d..8afbdaab258 100644
--- a/packages/react-error-overlay/src/index.js
+++ b/packages/react-error-overlay/src/index.js
@@ -138,7 +138,7 @@ function update() {
isLoadingIframe = true;
const loadingIframe = window.document.createElement('iframe');
applyStyles(loadingIframe, iframeStyle);
- loadingIframe.onload = function() {
+ loadingIframe.onload = function () {
const iframeDocument = loadingIframe.contentDocument;
if (iframeDocument != null && iframeDocument.body != null) {
iframe = loadingIframe;
diff --git a/packages/react-error-overlay/src/utils/parser.js b/packages/react-error-overlay/src/utils/parser.js
index 40a53905918..3f6c699f376 100644
--- a/packages/react-error-overlay/src/utils/parser.js
+++ b/packages/react-error-overlay/src/utils/parser.js
@@ -60,10 +60,7 @@ function parseStack(stack: string[]): StackFrame[] {
if (e.indexOf('(at ') !== -1) {
e = e.replace(/\(at /, '(');
}
- const data = e
- .trim()
- .split(/\s+/g)
- .slice(1);
+ const data = e.trim().split(/\s+/g).slice(1);
const last = data.pop();
return new StackFrame(data.join(' ') || null, ...extractLocation(last));
}
diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js
index 79e0ab20a4f..7b4c6d38153 100755
--- a/packages/react-scripts/bin/react-scripts.js
+++ b/packages/react-scripts/bin/react-scripts.js
@@ -1,4 +1,5 @@
#!/usr/bin/env node
+
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
@@ -12,45 +13,45 @@
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
- throw err;
+ throw err;
});
const spawn = require('react-dev-utils/crossSpawn');
const args = process.argv.slice(2);
const scriptIndex = args.findIndex(
- x => x === 'build' || x === 'eject' || x === 'start' || x === 'test' || x === 'dll'
+ x => x === 'build' || x === 'eject' || x === 'start' || x === 'test' || x === 'dll'
);
const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
-if (['build', 'eject', 'start', 'test', 'dll'].includes(script)) {
- const result = spawn.sync(
- 'node',
- nodeArgs
- .concat(require.resolve('../scripts/' + script))
- .concat(args.slice(scriptIndex + 1)),
- { stdio: 'inherit' }
- );
- if (result.signal) {
- if (result.signal === 'SIGKILL') {
- console.log(
- 'The build failed because the process exited too early. ' +
- 'This probably means the system ran out of memory or someone called ' +
- '`kill -9` on the process.'
- );
- } else if (result.signal === 'SIGTERM') {
- console.log(
- 'The build failed because the process exited too early. ' +
- 'Someone might have called `kill` or `killall`, or the system could ' +
- 'be shutting down.'
- );
- }
- process.exit(1);
+if (['build', 'eject', 'start', 'test'].includes(script)) {
+ const result = spawn.sync(
+ process.execPath,
+ nodeArgs
+ .concat(require.resolve('../scripts/' + script))
+ .concat(args.slice(scriptIndex + 1)), {
+ stdio: 'inherit'
+ }
+ );
+ if (result.signal) {
+ if (result.signal === 'SIGKILL') {
+ console.log(
+ 'The build failed because the process exited too early. ' +
+ 'This probably means the system ran out of memory or someone called ' +
+ '`kill -9` on the process.'
+ );
+ } else if (result.signal === 'SIGTERM') {
+ console.log(
+ 'The build failed because the process exited too early. ' +
+ 'Someone might have called `kill` or `killall`, or the system could ' +
+ 'be shutting down.'
+ );
}
process.exit(result.status);
+ }
} else {
- console.log('Unknown script "' + script + '".');
- console.log('Perhaps you need to update react-scripts?');
- console.log('See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases');
-}
+ console.log('Unknown script "' + script + '".');
+ console.log('Perhaps you need to update react-scripts?');
+ console.log('See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases');
+}
\ No newline at end of file
diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index f4303bda95d..850b0cfa480 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -25,11 +25,11 @@ if (!NODE_ENV) {
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
- `${paths.dotenv}.${NODE_ENV}`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+ `${paths.dotenv}.${NODE_ENV}`,
paths.dotenv,
].filter(Boolean);
diff --git a/packages/react-scripts/config/hotRefreshOverlayModuleStub.js b/packages/react-scripts/config/hotRefreshOverlayModuleStub.js
deleted file mode 100644
index 8171063fc78..00000000000
--- a/packages/react-scripts/config/hotRefreshOverlayModuleStub.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2015-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.
- */
-
-// This file is currently required because the error overlay has a bug preventing the its outright disabling.
-
-'use strict';
-
-function handleRuntimeError() {
- // Stubbed out due to a bug.
-}
-function clearRuntimeErrors() {
- // Stubbed out due to a bug.
-}
-
-module.exports = {
- handleRuntimeError,
- clearRuntimeErrors,
-};
diff --git a/packages/react-scripts/config/modules.js b/packages/react-scripts/config/modules.js
index 38c95b91e44..22820993a25 100644
--- a/packages/react-scripts/config/modules.js
+++ b/packages/react-scripts/config/modules.js
@@ -22,15 +22,8 @@ const resolve = require('resolve');
function getAdditionalModulePaths(options = {}) {
const baseUrl = options.baseUrl;
- // We need to explicitly check for null and undefined (and not a falsy value) because
- // TypeScript treats an empty string as `.`.
- if (baseUrl == null) {
- // If there's no baseUrl set we respect NODE_PATH
- // Note that NODE_PATH is deprecated and will be removed
- // in the next major release of create-react-app.
-
- const nodePath = process.env.NODE_PATH || '';
- return nodePath.split(path.delimiter).filter(Boolean);
+ if (!baseUrl) {
+ return '';
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 5929d5e558c..ef975149427 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -18,7 +18,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSlessetsPlugin = require('optimize-css-assets-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
@@ -45,7 +45,9 @@ const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
+const webpackDevClientEntry = require.resolve(
+ 'react-dev-utils/webpackHotDevClient'
+);
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
@@ -53,7 +55,9 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
-const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');
+const imageInlineSizeLimit = parseInt(
+ process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -66,666 +70,670 @@ const lessModuleRegex = /\.module\.(less)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
- const isEnvDevelopment = webpackEnv === 'development';
- const isEnvProduction = webpackEnv === 'production';
- const isEnvAnalyzer = process.env.BUNDLE_ANALYZER === 'true';
- const DLL_DIR = path.join(paths.dllConfig, isEnvProduction ? 'prod' : 'dev');
- const isDll = isEnvDevelopment
- ? process.env.DEV_DLL === 'true'
- : process.env.PROD_DLL === 'true';
+module.exports = function (webpackEnv) {
+ const isEnvDevelopment = webpackEnv === 'development';
+ const isEnvProduction = webpackEnv === 'production';
+ const isEnvAnalyzer = process.env.BUNDLE_ANALYZER === 'true';
+ const DLL_DIR = path.join(paths.dllConfig, isEnvProduction ? 'prod' : 'dev');
+ const isDll = isEnvDevelopment ?
+ process.env.DEV_DLL === 'true' :
+ process.env.PROD_DLL === 'true';
- // Variable used for enabling profiling in Production
- // passed into alias object. Uses a flag if passed into the build command
- const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile');
+ // Variable used for enabling profiling in Production
+ // passed into alias object. Uses a flag if passed into the build command
+ const isEnvProductionProfile =
+ isEnvProduction && process.argv.includes('--profile');
- // We will provide `paths.publicUrlOrPath` to our app
- // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
- // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
- // Get environment variables to inject into our app.
- const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+ // We will provide `paths.publicUrlOrPath` to our app
+ // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+ // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+ // Get environment variables to inject into our app.
+ const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
- const shouldUseReactRefresh = env.raw.FAST_REFRESH;
+ const shouldUseReactRefresh = env.raw.FAST_REFRESH;
- // common function to get style loaders
- const getStyleLoaders = (cssOptions, preProcessor, otherOptions) => {
- const loaders = [
- isEnvDevelopment && require.resolve('style-loader'),
- isEnvProduction && {
- loader: MiniCssExtractPlugin.loader,
- // css is located in `static/css`, use '../../' to locate index.html folder
- // in production `paths.publicUrlOrPath` can be a relative path
- options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {}
+ // common function to get style loaders
+ const getStyleLoaders = (cssOptions, preProcessor, otherOptions) => {
+ const loaders = [
+ isEnvDevelopment && require.resolve('style-loader'),
+ isEnvProduction && {
+ loader: MiniCssExtractPlugin.loader,
+ // css is located in `static/css`, use '../../' to locate index.html folder
+ // in production `paths.publicUrlOrPath` can be a relative path
+ options: paths.publicUrlOrPath.startsWith('.') ? {
+ publicPath: '../../'
+ } : {},
+ },
+ {
+ loader: require.resolve('css-loader'),
+ options: cssOptions,
+ },
+ {
+ // Options for PostCSS as we reference these options twice
+ // Adds vendor prefixing based on your specified browser support in
+ // package.json
+ loader: require.resolve('postcss-loader'),
+ options: {
+ // Necessary for external CSS imports to work
+ // https://github.com/facebook/create-react-app/issues/2677
+ ident: 'postcss',
+ plugins: () => [
+ require('postcss-flexbugs-fixes'),
+ require('postcss-preset-env')({
+ autoprefixer: {
+ flexbox: 'no-2009',
+ },
+ stage: 3,
+ }),
+ // Adds PostCSS Normalize as the reset css with default options,
+ // so that it honors browserslist config in package.json
+ // which in turn let's users customize the target behavior as per their needs.
+ postcssNormalize(),
+ ],
+ sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+ },
+ },
+ ].filter(Boolean);
+ if (preProcessor) {
+ loaders.push({
+ loader: require.resolve('resolve-url-loader'),
+ options: {
+ sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+ root: paths.appSrc,
+ },
+ }, {
+ loader: require.resolve(preProcessor),
+ options: {
+ ...otherOptions,
+ sourceMap: true,
+ },
+ });
+ }
+ return loaders;
+ };
+
+ return {
+ mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+ // Stop compilation early in production
+ bail: isEnvProduction,
+ devtool: isEnvProduction ?
+ shouldUseSourceMap ?
+ 'source-map' :
+ false : isEnvDevelopment && 'cheap-module-source-map',
+ // These are the "entry points" to our application.
+ // This means they will be the "root" imports that are included in JS bundle.
+ entry: isEnvDevelopment && !shouldUseReactRefresh ? [
+ // Include an alternative client for WebpackDevServer. A client's job is to
+ // connect to WebpackDevServer by a socket and get notified about changes.
+ // When you save a file, the client will either apply hot updates (in case
+ // of CSS changes), or refresh the page (in case of JS changes). When you
+ // make a syntax error, this client will display a syntax error overlay.
+ // Note: instead of the default WebpackDevServer client, we use a custom one
+ // to bring better experience for Create React App users. You can replace
+ // the line below with these two lines if you prefer the stock client:
+ //
+ // require.resolve('webpack-dev-server/client') + '?/',
+ // require.resolve('webpack/hot/dev-server'),
+ //
+ // When using the experimental react-refresh integration,
+ // the webpack plugin takes care of injecting the dev client for us.
+ webpackDevClientEntry,
+ // Finally, this is your app's code:
+ paths.appIndexJs,
+ // We include the app code last so that if there is a runtime error during
+ // initialization, it doesn't blow up the WebpackDevServer client, and
+ // changing JS code would still trigger a refresh.
+ ] : paths.appIndexJs,
+ output: {
+ // The build folder.
+ path: isEnvProduction ? paths.appBuild : undefined,
+ // Add /* filename */ comments to generated require()s in the output.
+ pathinfo: isEnvDevelopment,
+ // There will be one main bundle, and one file per asynchronous chunk.
+ // In development, it does not produce real files.
+ filename: isEnvProduction ?
+ 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js',
+ // TODO: remove this when upgrading to webpack 5
+ futureEmitAssets: true,
+ // There are also additional JS chunk files if you use code splitting.
+ chunkFilename: isEnvProduction ?
+ 'static/js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js',
+ // webpack uses `publicPath` to determine where the app is being served from.
+ // It requires a trailing slash, or the file assets will get an incorrect path.
+ // We inferred the "public path" (such as / or /my-project) from homepage.
+ publicPath: paths.publicUrlOrPath,
+ // Point sourcemap entries to original disk location (format as URL on Windows)
+ devtoolModuleFilenameTemplate: isEnvProduction ?
+ info =>
+ path
+ .relative(paths.appSrc, info.absoluteResourcePath)
+ .replace(/\\/g, '/') : isEnvDevelopment &&
+ (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+ // Prevents conflicts when multiple webpack runtimes (from different apps)
+ // are used on the same page.
+ jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+ // this defaults to 'window', but by setting it to 'this' then
+ // module chunks which are built will work in web workers as well.
+ globalObject: 'this',
+ },
+ optimization: {
+ minimize: isEnvProduction,
+ minimizer: [
+ // This is only used in production mode
+ new TerserPlugin({
+ terserOptions: {
+ parse: {
+ // We want terser to parse ecma 8 code. However, we don't want it
+ // to apply any minification steps that turns valid ecma 5 code
+ // into invalid ecma 5 code. This is why the 'compress' and 'output'
+ // sections only apply transformations that are ecma 5 safe
+ // https://github.com/facebook/create-react-app/pull/4234
+ ecma: 8,
+ },
+ compress: {
+ ecma: 5,
+ warnings: false,
+ // Disabled because of an issue with Uglify breaking seemingly valid code:
+ // https://github.com/facebook/create-react-app/issues/2376
+ // Pending further investigation:
+ // https://github.com/mishoo/UglifyJS2/issues/2011
+ comparisons: false,
+ // Disabled because of an issue with Terser breaking valid code:
+ // https://github.com/facebook/create-react-app/issues/5250
+ // Pending further investigation:
+ // https://github.com/terser-js/terser/issues/120
+ inline: 2,
+ },
+ mangle: {
+ safari10: true,
},
+ // Added for profiling in devtools
+ keep_classnames: isEnvProductionProfile,
+ keep_fnames: isEnvProductionProfile,
+ output: {
+ ecma: 5,
+ comments: false,
+ // Turned on because emoji and regex is not minified properly using default
+ // https://github.com/facebook/create-react-app/issues/2488
+ ascii_only: true,
+ },
+ },
+ sourceMap: shouldUseSourceMap,
+ }),
+ // This is only used in production mode
+ new OptimizeCSSAssetsPlugin({
+ cssProcessorOptions: {
+ parser: safePostCssParser,
+ map: shouldUseSourceMap ? {
+ // `inline: false` forces the sourcemap to be output into a
+ // separate file
+ inline: false,
+ // `annotation: true` appends the sourceMappingURL to the end of
+ // the css file, helping the browser find the sourcemap
+ annotation: true,
+ } : false,
+ },
+ cssProcessorPluginOptions: {
+ preset: ['default', {
+ minifyFontValues: {
+ removeQuotes: false
+ }
+ }],
+ },
+ }),
+ ],
+ // Automatically split vendor and commons
+ // https://twitter.com/wSokra/status/969633336732905474
+ // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+ splitChunks: {
+ chunks: 'all',
+ name: false,
+ },
+ // Keep the runtime chunk separated to enable long term caching
+ // https://twitter.com/wSokra/status/969679223278505985
+ // https://github.com/facebook/create-react-app/issues/5358
+ runtimeChunk: {
+ name: entrypoint => `runtime-${entrypoint.name}`,
+ },
+ },
+ resolve: {
+ // This allows you to set a fallback for where webpack should look for modules.
+ // We placed these paths second because we want `node_modules` to "win"
+ // if there are any conflicts. This matches Node resolution mechanism.
+ // https://github.com/facebook/create-react-app/issues/253
+ modules: ['node_modules', paths.appNodeModules].concat(
+ modules.additionalModulePaths || []
+ ),
+ // These are the reasonable defaults supported by the Node ecosystem.
+ // We also include JSX as a common component filename extension to support
+ // some tools, although we do not recommend using it, see:
+ // https://github.com/facebook/create-react-app/issues/290
+ // `web` extension prefixes have been added for better support
+ // for React Native Web.
+ extensions: paths.moduleFileExtensions
+ .map(ext => `.${ext}`)
+ .filter(ext => useTypeScript || !ext.includes('ts')),
+ alias: {
+ // Support React Native Web
+ // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+ 'react-native': 'react-native-web',
+ // Allows for better profiling with ReactDevTools
+ ...(isEnvProductionProfile && {
+ 'react-dom$': 'react-dom/profiling',
+ 'scheduler/tracing': 'scheduler/tracing-profiling',
+ }),
+ ...(modules.webpackAliases || {}),
+ },
+ plugins: [
+ // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+ // guards against forgotten dependencies and such.
+ PnpWebpackPlugin,
+ // Prevents users from importing files from outside of src/ (or node_modules/).
+ // This often causes confusion because we only process files within src/ with babel.
+ // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+ // please link the files into your node_modules/ and let module-resolution kick in.
+ // Make sure your source files are compiled, as they will not be processed in any way.
+ new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+ ],
+ },
+ resolveLoader: {
+ plugins: [
+ // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
+ // from the current package.
+ PnpWebpackPlugin.moduleLoader(module),
+ ],
+ },
+ module: {
+ strictExportPresence: true,
+ rules: [
+ // Disable require.ensure as it's not a standard language feature.
+ {
+ parser: {
+ requireEnsure: false
+ }
+ },
+ {
+ // "oneOf" will traverse all following loaders until one will
+ // match the requirements. When no loader matches it will fall
+ // back to the "file" loader at the end of the loader list.
+ oneOf: [
+ // "url" loader works like "file" loader except that it embeds assets
+ // smaller than specified limit in bytes as data URLs to avoid requests.
+ // A missing `test` is equivalent to a match.
{
- loader: require.resolve('css-loader'),
- options: cssOptions
+ test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+ loader: require.resolve('url-loader'),
+ options: {
+ limit: imageInlineSizeLimit,
+ name: 'static/media/[name].[hash:8].[ext]',
+ },
},
+ // Process application JS with Babel.
+ // The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
- // Options for PostCSS as we reference these options twice
- // Adds vendor prefixing based on your specified browser support in
- // package.json
- loader: require.resolve('postcss-loader'),
- options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebook/create-react-app/issues/2677
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- require('postcss-preset-env')({
- autoprefixer: {
- flexbox: 'no-2009'
- },
- stage: 3
- }),
- // Adds PostCSS Normalize as the reset css with default options,
- // so that it honors browserslist config in package.json
- // which in turn let's users customize the target behavior as per their needs.
- postcssNormalize()
- ],
- sourceMap: isEnvProduction && shouldUseSourceMap
- }
- }
- ].filter(Boolean);
- if (preProcessor) {
- loaders.push(
- {
- loader: require.resolve('resolve-url-loader'),
- options: {
- sourceMap: isEnvProduction && shouldUseSourceMap
- }
- },
- {
- loader: require.resolve(preProcessor),
- options: {
- ...otherOptions,
- sourceMap: true
- }
- }
- );
- }
- return loaders;
- };
-
- return {
- mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
- // Stop compilation early in production
- bail: isEnvProduction,
- devtool: isEnvProduction
- ? shouldUseSourceMap ? 'source-map' : false
- : isEnvDevelopment && 'cheap-module-source-map',
- // These are the "entry points" to our application.
- // This means they will be the "root" imports that are included in JS bundle.
- entry:
- isEnvDevelopment && !shouldUseReactRefresh
- ? [
- // Include an alternative client for WebpackDevServer. A client's job is to
- // connect to WebpackDevServer by a socket and get notified about changes.
- // When you save a file, the client will either apply hot updates (in case
- // of CSS changes), or refresh the page (in case of JS changes). When you
- // make a syntax error, this client will display a syntax error overlay.
- // Note: instead of the default WebpackDevServer client, we use a custom one
- // to bring better experience for Create React App users. You can replace
- // the line below with these two lines if you prefer the stock client:
- //
- // require.resolve('webpack-dev-server/client') + '?/',
- // require.resolve('webpack/hot/dev-server'),
- //
- // When using the experimental react-refresh integration,
- // the webpack plugin takes care of injecting the dev client for us.
- webpackDevClientEntry,
- // Finally, this is your app's code:
- paths.appIndexJs
- // We include the app code last so that if there is a runtime error during
- // initialization, it doesn't blow up the WebpackDevServer client, and
- // changing JS code would still trigger a refresh.
+ test: /\.(js|mjs|jsx|ts|tsx)$/,
+ include: paths.appSrc,
+ loader: require.resolve('babel-loader'),
+ options: {
+ customize: require.resolve(
+ 'babel-preset-react-app/webpack-overrides'
+ ),
+ // @remove-on-eject-begin
+ babelrc: false,
+ configFile: false,
+ presets: [require.resolve('babel-preset-react-app')],
+ // Make sure we have a unique cache identifier, erring on the
+ // side of caution.
+ // We remove this when the user ejects because the default
+ // is sane and uses Babel options. Instead of options, we use
+ // the react-scripts and babel-preset-react-app versions.
+ cacheIdentifier: getCacheIdentifier(
+ isEnvProduction ?
+ 'production' :
+ isEnvDevelopment && 'development',
+ [
+ 'babel-plugin-named-asset-import',
+ 'babel-preset-react-app',
+ 'react-dev-utils',
+ 'react-scripts',
]
- : paths.appIndexJs,
- output: {
- // The build folder.
- path: isEnvProduction ? paths.appBuild : undefined,
- // Add /* filename */ comments to generated require()s in the output.
- pathinfo: isEnvDevelopment,
- // There will be one main bundle, and one file per asynchronous chunk.
- // In development, it does not produce real files.
- filename: isEnvProduction
- ? 'static/js/[name].[contenthash:8].js'
- : isEnvDevelopment && 'static/js/bundle.js',
- // TODO: remove this when upgrading to webpack 5
- futureEmitAssets: true,
- // There are also additional JS chunk files if you use code splitting.
- chunkFilename: isEnvProduction
- ? 'static/js/[name].[contenthash:8].chunk.js'
- : isEnvDevelopment && 'static/js/[name].chunk.js',
- // webpack uses `publicPath` to determine where the app is being served from.
- // It requires a trailing slash, or the file assets will get an incorrect path.
- // We inferred the "public path" (such as / or /my-project) from homepage.
- publicPath: paths.publicUrlOrPath,
- // Point sourcemap entries to original disk location (format as URL on Windows)
- devtoolModuleFilenameTemplate: isEnvProduction
- ? info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
- : isEnvDevelopment &&
- (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
- // Prevents conflicts when multiple webpack runtimes (from different apps)
- // are used on the same page.
- jsonpFunction: `webpackJsonp${appPackageJson.name}`,
- // this defaults to 'window', but by setting it to 'this' then
- // module chunks which are built will work in web workers as well.
- globalObject: 'this'
- },
- optimization: {
- minimize: isEnvProduction,
- minimizer: [
- // This is only used in production mode
- new TerserPlugin({
- terserOptions: {
- parse: {
- // We want terser to parse ecma 8 code. However, we don't want it
- // to apply any minification steps that turns valid ecma 5 code
- // into invalid ecma 5 code. This is why the 'compress' and 'output'
- // sections only apply transformations that are ecma 5 safe
- // https://github.com/facebook/create-react-app/pull/4234
- ecma: 8
- },
- compress: {
- ecma: 5,
- warnings: false,
- // Disabled because of an issue with Uglify breaking seemingly valid code:
- // https://github.com/facebook/create-react-app/issues/2376
- // Pending further investigation:
- // https://github.com/mishoo/UglifyJS2/issues/2011
- comparisons: false,
- // Disabled because of an issue with Terser breaking valid code:
- // https://github.com/facebook/create-react-app/issues/5250
- // Pending further investigation:
- // https://github.com/terser-js/terser/issues/120
- inline: 2
- },
- mangle: {
- safari10: true
+ ),
+ // @remove-on-eject-end
+ plugins: [
+ [
+ require.resolve('babel-plugin-named-asset-import'),
+ {
+ loaderMap: {
+ svg: {
+ ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
- // Added for profiling in devtools
- keep_classnames: isEnvProductionProfile,
- keep_fnames: isEnvProductionProfile,
- output: {
- ecma: 5,
- comments: false,
- // Turned on because emoji and regex is not minified properly using default
- // https://github.com/facebook/create-react-app/issues/2488
- ascii_only: true
- }
+ },
},
- sourceMap: shouldUseSourceMap
- }),
- // This is only used in production mode
- new OptimizeCSlessetsPlugin({
- cssProcessorOptions: {
- parser: safePostCssParser,
- map: shouldUseSourceMap
- ? {
- // `inline: false` forces the sourcemap to be output into a
- // separate file
- inline: false,
- // `annotation: true` appends the sourceMappingURL to the end of
- // the css file, helping the browser find the sourcemap
- annotation: true
- }
- : false
+ ],
+ isEnvDevelopment &&
+ shouldUseReactRefresh &&
+ require.resolve('react-refresh/babel'),
+ ].filter(Boolean),
+ // This is a feature of `babel-loader` for webpack (not Babel itself).
+ // It enables caching results in ./node_modules/.cache/babel-loader/
+ // directory for faster rebuilds.
+ cacheDirectory: true,
+ // See #6846 for context on why cacheCompression is disabled
+ cacheCompression: false,
+ compact: isEnvProduction,
+ },
+ },
+ // Process any JS outside of the app with Babel.
+ // Unlike the application JS, we only compile the standard ES features.
+ {
+ test: /\.(js|mjs)$/,
+ exclude: /@babel(?:\/|\\{1,2})runtime/,
+ loader: require.resolve('babel-loader'),
+ options: {
+ babelrc: false,
+ configFile: false,
+ compact: false,
+ presets: [
+ [
+ require.resolve('babel-preset-react-app/dependencies'),
+ {
+ helpers: true
},
- cssProcessorPluginOptions: {
- preset: ['default', { minifyFontValues: { removeQuotes: false } }]
- }
- })
- ],
- // Automatically split vendor and commons
- // https://twitter.com/wSokra/status/969633336732905474
- // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
- splitChunks: {
- chunks: 'all',
- name: false
+ ],
+ ],
+ cacheDirectory: true,
+ // See #6846 for context on why cacheCompression is disabled
+ cacheCompression: false,
+ // @remove-on-eject-begin
+ cacheIdentifier: getCacheIdentifier(
+ isEnvProduction ?
+ 'production' :
+ isEnvDevelopment && 'development',
+ [
+ 'babel-plugin-named-asset-import',
+ 'babel-preset-react-app',
+ 'react-dev-utils',
+ 'react-scripts',
+ ]
+ ),
+ // @remove-on-eject-end
+ // Babel sourcemaps are needed for debugging into node_modules
+ // code. Without the options below, debuggers like VSCode
+ // show incorrect code and set breakpoints on the wrong lines.
+ sourceMaps: shouldUseSourceMap,
+ inputSourceMap: shouldUseSourceMap,
+ },
},
- // Keep the runtime chunk separated to enable long term caching
- // https://twitter.com/wSokra/status/969679223278505985
- // https://github.com/facebook/create-react-app/issues/5358
- runtimeChunk: {
- name: entrypoint => `runtime-${entrypoint.name}`
- }
- },
- resolve: {
- // This allows you to set a fallback for where webpack should look for modules.
- // We placed these paths second because we want `node_modules` to "win"
- // if there are any conflicts. This matches Node resolution mechanism.
- // https://github.com/facebook/create-react-app/issues/253
- modules: ['node_modules', paths.appNodeModules].concat(
- modules.additionalModulePaths || []
- ),
- // These are the reasonable defaults supported by the Node ecosystem.
- // We also include JSX as a common component filename extension to support
- // some tools, although we do not recommend using it, see:
- // https://github.com/facebook/create-react-app/issues/290
- // `web` extension prefixes have been added for better support
- // for React Native Web.
- extensions: paths.moduleFileExtensions
- .map(ext => `.${ext}`)
- .filter(ext => useTypeScript || !ext.includes('ts')),
- alias: {
- // Support React Native Web
- // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
- 'react-native': 'react-native-web',
- // Allows for better profiling with ReactDevTools
- ...(isEnvProductionProfile && {
- 'react-dom$': 'react-dom/profiling',
- 'scheduler/tracing': 'scheduler/tracing-profiling'
- }),
- ...(modules.webpackAliases || {})
+ // "postcss" loader applies autoprefixer to our CSS.
+ // "css" loader resolves paths in CSS and adds assets as dependencies.
+ // "style" loader turns CSS into JS modules that inject
If you use it, move it to `src` and add the following line to `` in your HTML: ```html - + ``` #### New Feature @@ -1276,13 +1337,13 @@ Since 0.3.0 added a test runner, we recommend that you add it to the `scripts` s ### Build Dependency (`react-scripts`) -* You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) -* You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) -* You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) -* Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) -* Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) -* The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) -* Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) +- You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) +- You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) +- You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) +- Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) +- Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) +- The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) +- Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) ### Migrating from 0.2.2 to 0.2.3 @@ -1294,15 +1355,15 @@ Newly created projects will use `0.2.3` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) -* `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) -* Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) -* All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) -* `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) -* [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) -* Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) -* The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) -* The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) +- When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) +- `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) +- Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) +- All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) +- `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) +- [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) +- Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) +- The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) +- The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) ### Migrating from 0.2.1 to 0.2.2 @@ -1314,12 +1375,12 @@ Newly created projects will use `0.2.2` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) -* Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) -* We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) -* CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) -* Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) -* We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) +- Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) +- Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) +- We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) +- CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) +- Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) +- We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) ### Migrating from 0.2.0 to 0.2.1 @@ -1331,27 +1392,27 @@ Newly created projects will use `0.2.1` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) -* Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) -* Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) -* When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) -* You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) -* `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) -* Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) -* Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) -* ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) -* A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) -* A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) -* A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) -* Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) -* Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) -* Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) -* After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) +- You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) +- Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) +- Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) +- When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) +- You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) +- `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) +- Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) +- Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) +- ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) +- A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) +- A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) +- A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) +- Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) +- Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) +- Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) +- After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) ### Global CLI (`create-react-app`) -* It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) -* It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) +- It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) +- It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) ### Migrating from 0.1.0 to 0.2.0 @@ -1371,4 +1432,4 @@ You may need to fix a few lint warnings about missing `
If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new).
-If you have questions or need help, please ask in our [Spectrum](https://spectrum.chat/create-react-app) community. +If you have questions or need help, please ask in [GitHub Discussions](https://github.com/facebook/create-react-app/discussions). ## Quick Overview @@ -17,7 +17,7 @@ cd my-app npm start ``` -If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that npx always uses the latest version. +If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that npx always uses the latest version. _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ diff --git a/azure-pipelines-test-job.yml b/azure-pipelines-test-job.yml index 7073bf3eab6..e035e141c91 100644 --- a/azure-pipelines-test-job.yml +++ b/azure-pipelines-test-job.yml @@ -6,10 +6,8 @@ parameters: name: '' testScript: '' configurations: - LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x } LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } jobs: - job: ${{ parameters.name }} diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 8021fb92668..3b7d9669e57 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -12,8 +12,6 @@ variables: NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache # Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory. VSTS_OVERWRITE_TEMP: True - # Override Verdaccio package to use. This is temporary and is needed to avoid socket timeouts on hosted Windows agent (on Azure). This also changes Verdaccio to return a 503 (service unavailable) instead of a 404 (not found) when the connection to the uplink timesout. - VERDACCIO_PACKAGE: https://github.com/willsmythe/verdaccio/releases/download/create-react-app/verdaccio-4.0.0-alpha.8.tgz CRA_INTERNAL_TEST: true # ****************************************************************************** @@ -57,36 +55,23 @@ jobs: name: Behavior testScript: tasks/e2e-behavior.sh configurations: - LinuxNode8: { vmImage: 'ubuntu-18.04', nodeVersion: 8.x } - LinuxNode10: { vmImage: 'ubuntu-18.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } - MacNode8: { vmImage: 'macOS-10.15', nodeVersion: 8.x } + LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } + WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x } + WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x } MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x } + MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x } # ****************************************************************************** # Old Node test suite # ****************************************************************************** - job: OldNode pool: - vmImage: ubuntu-16.04 + vmImage: ubuntu-latest steps: - task: NodeTool@0 inputs: - versionSpec: 6.x - displayName: 'Install Node.js 6.x' + versionSpec: 8.x + displayName: 'Install Node.js 8.x' - bash: tasks/e2e-old-node.sh displayName: 'Run tests' - # ****************************************************************************** - # Unsupported Node with TypeScript flag - # ****************************************************************************** - - job: UnsupportedNodeWithTypeScript - pool: - vmImage: ubuntu-16.04 - steps: - - task: NodeTool@0 - inputs: - versionSpec: 8.9.x - displayName: 'Install Node.js 8.9.x' - - bash: tasks/e2e-typescript-unsupported-node.sh - displayName: 'Run unsupported TypeScript test' diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md index 23821829c3e..c08567124af 100644 --- a/docusaurus/docs/adding-css-reset.md +++ b/docusaurus/docs/adding-css-reset.md @@ -16,6 +16,8 @@ To start using it, add `@import-normalize;` anywhere in your CSS file(s). You on /* rest of app styles */ ``` +> **Tip**: If you see an "_Unknown at rule @import-normalize css(unknownAtRules)_" warning in VSCode, change the `css.lint.unknownAtRules` setting to `ignore`. + You can control which parts of [normalize.css] to use via your project's [browserslist]. Results when [browserslist] is `last 3 versions`: diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index b604a10c810..48bfea2cf64 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -132,8 +132,8 @@ REACT_APP_NOT_SECRET_CODE=abcdef Files on the left have more priority than files on the right: -- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env` -- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env` +- `npm start`: `.env.development.local`, `.env.local`, `.env.development`, `.env` +- `npm run build`: `.env.production.local`, `.env.local`, `.env.production`, `.env` - `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing) These variables will act as the defaults if the machine does not explicitly set them. diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 40c9c2242a8..78d1c356729 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -19,7 +19,7 @@ npx create-react-app my-app --template typescript yarn create react-app my-app --template typescript ``` -> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version. +> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version. > > Global installs of `create-react-app` are no longer supported. @@ -47,7 +47,7 @@ You are not required to make a [`tsconfig.json` file](https://www.typescriptlang ## Troubleshooting -If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). +If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` or `yarn global remove create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). If you are currently using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript/), see [this blog post](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) for instructions on how to migrate to Create React App. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index fb71df0e231..958f9ac3168 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -22,7 +22,6 @@ You can adjust various development and production settings by setting environmen | 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](
- -**If you skip it, your app will not deploy correctly.** - -Open your `package.json` and add a `homepage` field for your project: - -```json - "homepage": "https://myusername.github.io/my-app", -``` - -or for a GitHub user page: - -```json - "homepage": "https://myusername.github.io", -``` - -or for a custom domain page: - -```json - "homepage": "https://mywebsite.com", -``` - -Create React App uses the `homepage` field to determine the root URL in the built HTML file. - -### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` - -Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. - -To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: - -```sh -npm install --save gh-pages -``` - -Alternatively you may use `yarn`: - -```sh -yarn add gh-pages -``` - -Add the following scripts in your `package.json`: - -```diff - "scripts": { -+ "predeploy": "npm run build", -+ "deploy": "gh-pages -d build", - "start": "react-scripts start", - "build": "react-scripts build", -``` - -The `predeploy` script will run automatically before `deploy` is run. - -If you are deploying to a GitHub user page instead of a project page you'll need to make one -additional modification: - -1. Tweak your `package.json` scripts to push deployments to **master**: - -```diff - "scripts": { - "predeploy": "npm run build", -- "deploy": "gh-pages -d build", -+ "deploy": "gh-pages -b master -d build", -``` - -### Step 3: Deploy the site by running `npm run deploy` - -Then run: - -```sh -npm run deploy -``` - -### Step 4: For a project page, ensure your project’s settings use `gh-pages` - -Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: - -
-
-### Step 5: Optionally, configure the domain
-
-You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
-
-Your CNAME file should look like this:
-
-```
-mywebsite.com
-```
-
-### Notes on client-side routing
-
-GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
-
-- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
-- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
-
-### Troubleshooting
-
-#### "/dev/tty: No such a device or address"
-
-If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
-
-1. Create a new [Personal Access Token](https://github.com/settings/tokens)
-2. `git remote set-url origin https://+ +**If you skip it, your app will not deploy correctly.** + +Open your `package.json` and add a `homepage` field for your project: + +```json + "homepage": "https://myusername.github.io/my-app", +``` + +or for a GitHub user page: + +```json + "homepage": "https://myusername.github.io", +``` + +or for a custom domain page: + +```json + "homepage": "https://mywebsite.com", +``` + +Create React App uses the `homepage` field to determine the root URL in the built HTML file. + +### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` + +Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. + +To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: + +```sh +npm install --save gh-pages +``` + +Alternatively you may use `yarn`: + +```sh +yarn add gh-pages +``` + +Add the following scripts in your `package.json`: + +```diff + "scripts": { ++ "predeploy": "npm run build", ++ "deploy": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build", +``` + +The `predeploy` script will run automatically before `deploy` is run. + +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: + +1. Tweak your `package.json` scripts to push deployments to **master**: + +```diff + "scripts": { + "predeploy": "npm run build", +- "deploy": "gh-pages -d build", ++ "deploy": "gh-pages -b master -d build", +``` + +### Step 3: Deploy the site by running `npm run deploy` + +Then run: + +```sh +npm run deploy +``` + +### Step 4: For a project page, ensure your project’s settings use `gh-pages` + +Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: + +
+
+### Step 5: Optionally, configure the domain
+
+You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
+
+Your CNAME file should look like this:
+
+```
+mywebsite.com
+```
+
+### Notes on client-side routing
+
+GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
+
+- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
+- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
+
+### Troubleshooting
+
+#### "/dev/tty: No such a device or address"
+
+If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
+
+1. Create a new [Personal Access Token](https://github.com/settings/tokens)
+2. `git remote set-url origin https://