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,5 @@
+---
+'@lighting-beetle/lighter-react-scripts': minor
+---
+
+Update CRA to 3.4.1
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:/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"