lightingbeetle · adammockor · Mar 22, 2020 · Oct 23, 2018 · Nov 17, 2018 · Sep 8, 2019
diff --git a/.changeset/pink-candles-film.md b/.changeset/pink-candles-film.md
@@ -0,0 +1,11 @@
+---
+'babel-preset-react-app': minor
+'cra-template-typescript': minor
+'cra-template': minor
+'create-react-app': minor
+'react-dev-utils': minor
+'react-error-overlay': minor
+'@lighting-beetle/lighter-react-scripts': minor
+---
+
+Update CRA
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -57,12 +57,12 @@ jobs:
       name: Behavior
       testScript: tasks/e2e-behavior.sh
       configurations:
-        LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x }
-        LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
+        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.13', nodeVersion: 8.x }
-        MacNode10: { vmImage: 'macOS-10.13', nodeVersion: 10.x }
+        MacNode8: { vmImage: 'macOS-10.15', nodeVersion: 8.x }
+        MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x }
 
   # ******************************************************************************
   # Old Node test suite

diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md
@@ -25,5 +25,5 @@ You can adjust various development and production settings by setting environmen
 | 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`, ESLint configs that extend `eslint-config-react-app` will be used by `eslint-loader`. Any rules that are set to `"error"` will stop the application from building.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | TSC_COMPILE_ON_ERROR    |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md
@@ -31,7 +31,7 @@ If you're interested in building a custom template, first take a look at how we'
 A template must have the following structure:
 
 ```
-my-app/
+cra-template-[template-name]/
   README.md (for npm)
   template.json
   package.json

diff --git a/docusaurus/docs/integrating-with-an-api-backend.md b/docusaurus/docs/integrating-with-an-api-backend.md
@@ -24,7 +24,6 @@ It allows creating hypermedia and GraphQL APIs in minutes.
 It is shipped with an official Progressive Web App generator as well as a dynamic administration interface, both built for Create React App.
 Check out [this tutorial](https://api-platform.com/docs/distribution).
 
-
 ## C# (ASP.NET Core)
 
 ASP.NET Core has a React project template that uses Create React App. Check out [their documentation](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react).
diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md
@@ -85,7 +85,7 @@ $ yarn add http-proxy-middleware
 Next, create `src/setupProxy.js` and place the following contents in it:
 
 ```js
-const proxy = require('http-proxy-middleware');
+const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function(app) {
   // ...
@@ -95,12 +95,12 @@ module.exports = function(app) {
 You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`:
 
 ```js
-const proxy = require('http-proxy-middleware');
+const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function(app) {
   app.use(
     '/api',
-    proxy({
+    createProxyMiddleware({
       target: 'http://localhost:5000',
       changeOrigin: true,
     })

diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md
@@ -35,7 +35,6 @@ Note that any rules set to `"error"` will stop the project from building.
 There are a few things to remember:
 
 1. We highly recommend extending the base config, as removing it could introduce hard-to-find issues.
-1. `.eslintignore` files will be respected
 1. When working with TypeScript, you'll need to provide an `overrides` object for rules that should _only_ target TypeScript files.
 
 In the below example:

diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js
@@ -185,6 +185,12 @@ module.exports = function(api, opts, env) {
           removeImport: true,
         },
       ],
+      // Optional chaining and nullish coalescing are supported in @babel/preset-env,
+      // but not yet supported in webpack due to support missing from acorn.
+      // These can be removed once webpack has support.
+      // See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250
+      require('@babel/plugin-proposal-optional-chaining').default,
+      require('@babel/plugin-proposal-nullish-coalescing-operator').default,
     ].filter(Boolean),
     overrides: [
       isFlowEnabled && {

diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-react-app",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "description": "Babel preset used by Create React App",
   "repository": {
     "type": "git",
@@ -21,17 +21,19 @@
     "test.js"
   ],
   "dependencies": {
-    "@babel/core": "7.8.4",
+    "@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-transform-flow-strip-types": "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.8.3",
-    "@babel/preset-env": "7.8.4",
-    "@babel/preset-react": "7.8.3",
-    "@babel/preset-typescript": "7.8.3",
-    "@babel/runtime": "7.8.4",
+    "@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-plugin-macros": "2.8.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24"
   }

diff --git a/packages/cra-template-typescript/package.json b/packages/cra-template-typescript/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-template-typescript",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "keywords": [
     "react",
     "create-react-app",

diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx
@@ -4,7 +4,12 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  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.

diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-template",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "keywords": [
     "react",
     "create-react-app",

diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js
@@ -4,7 +4,12 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  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.

diff --git a/packages/cra-template/template/src/serviceWorker.js b/packages/cra-template/template/src/serviceWorker.js
@@ -101,7 +101,7 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.

diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-app",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "keywords": [
     "react",
     "lighter"