From 52711928f1e7efb4da36af555bcf9e06d543c532 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Fri, 28 Feb 2020 11:00:09 +0000
Subject: [PATCH 01/25] [NO JIRA]: Adding loadable component support

---
 packages/react-scripts/CHANGELOG.md                 | 4 ++++
 packages/react-scripts/config/webpack.config.js     | 3 +++
 packages/react-scripts/config/webpack.config.ssr.js | 3 +++
 packages/react-scripts/package.json                 | 2 ++
 4 files changed, 12 insertions(+)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index d0ccfcdeb5..593bfc2484 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,5 +1,9 @@
 # `backpack-react-scripts` Change Log
 
+## 7.0.6 (Pending)
+
+- Added support for loadable components.
+
 ## 7.0.5 - 2020-01-10
 
 ### Fixed
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index c2d5e98b9d..6717b1b537 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -35,6 +35,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 
+const LoadablePlugin = require('@loadable/webpack-plugin');
 const sassFunctions = require('bpk-mixins/sass-functions');
 const camelCase = require('lodash/camelCase');
 const pkgJson = require(paths.appPackageJson);
@@ -429,6 +430,7 @@ module.exports = function(webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
+                  "@loadable/babel-plugin",
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
@@ -602,6 +604,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 8fa836a041..451bb79618 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -35,6 +35,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 
+const LoadablePlugin = require('@loadable/webpack-plugin');
 const sassFunctions = require('bpk-mixins/sass-functions');
 // const camelCase = require('lodash/camelCase');
 const pkgJson = require(paths.appPackageJson);
@@ -436,6 +437,7 @@ module.exports = function(webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
+                  "@loadable/babel-plugin",
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
@@ -609,6 +611,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       // new HtmlWebpackPlugin(
       //   Object.assign(
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index ba7f326a8e..152ec662c1 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -22,6 +22,8 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.2.2",
+    "@loadable/babel-plugin": "^5.6.0",
+    "@loadable/webpack-plugin": "^5.5.0",
     "@svgr/webpack": "2.4.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "23.6.0",

From a22a5a44df4b5465f9fd6700b19ea573735772c5 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Thu, 5 Mar 2020 15:50:36 +0000
Subject: [PATCH 02/25] Output ssr and web chunks to different folders (#73)

---
 packages/react-scripts/config/paths.js           |  9 ++++++---
 packages/react-scripts/config/webpack.config.js  |  2 +-
 .../react-scripts/config/webpack.config.ssr.js   |  2 +-
 packages/react-scripts/scripts/build.js          | 16 ++++++++--------
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 4a072de4e7..110857bea2 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -77,7 +77,8 @@ const resolveModule = (resolveFn, filePath) => {
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
+  appBuildWeb: resolveApp('build/web'),
+  appBuildSsr: resolveApp('build/ssr'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -100,7 +101,8 @@ const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
+  appBuildWeb: resolveApp('build/web'),
+  appBuildSsr: resolveApp('build/ssr'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -135,7 +137,8 @@ if (
   module.exports = {
     dotenv: resolveOwn('template/.env'),
     appPath: resolveApp('.'),
-    appBuild: resolveOwn('../../build'),
+    appBuildWeb: resolveOwn('../../build/web'),
+    appBuildSsr: resolveOwn('../../build/ssr'),
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),
     appIndexJs: resolveModule(resolveOwn, 'template/src/index'),
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 6717b1b537..90780db3c3 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -184,7 +184,7 @@ module.exports = function(webpackEnv) {
       jsonpFunction: camelCase(pkgJson.name + 'JsonpCallback'),
       crossOriginLoading,
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
+      path: isEnvProduction ? paths.appBuildWeb : 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.
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 451bb79618..1cbeff094c 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -183,7 +183,7 @@ module.exports = function(webpackEnv) {
     ].filter(Boolean),
     output: {
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
+      path: isEnvProduction ? paths.appBuildSsr : 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.
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index d6effe0b0c..27cecc09e6 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -80,12 +80,12 @@ checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // First, read the current file sizes in build directory.
     // This lets us display how much they changed later.
-    return measureFileSizesBeforeBuild(paths.appBuild);
+    return measureFileSizesBeforeBuild(paths.appBuildWeb);
   })
   .then(previousFileSizes => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
+    fs.emptyDirSync(paths.appBuildWeb);
     // Merge with the public folder
     copyPublicFolder();
     // Start the webpack build
@@ -104,8 +104,8 @@ checkBrowsers(paths.appPath, isInteractive)
       // The SSR config still omits a css file - it's not yet possible to omit
       // file output in ExtractTextPlugin. This is not needed so lets clean
       // it up to avoid confusion.
-      const ssrCssPath = path.join(paths.appBuild, 'ssr.css');
-      const ssrCssMapPath = path.join(paths.appBuild, 'ssr.css.map');
+      const ssrCssPath = path.join(paths.appBuildSsr, 'ssr.css');
+      const ssrCssMapPath = path.join(paths.appBuildSsr, 'ssr.css.map');
       if (fs.existsSync(ssrCssPath)) {
         fs.unlinkSync(ssrCssPath);
       }
@@ -134,7 +134,7 @@ checkBrowsers(paths.appPath, isInteractive)
       printFileSizesAfterBuild(
         stats,
         previousFileSizes,
-        paths.appBuild,
+        paths.appBuildWeb,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
         WARN_AFTER_CHUNK_GZIP_SIZE
       );
@@ -143,7 +143,7 @@ checkBrowsers(paths.appPath, isInteractive)
       const appPackage = require(paths.appPackageJson);
       const publicUrl = paths.publicUrl;
       const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      const buildFolder = path.relative(process.cwd(), paths.appBuildWeb);
       printHostingInstructions(
         appPackage,
         publicUrl,
@@ -222,7 +222,7 @@ function build(previousFileSizes) {
       };
       if (writeStatsJson) {
         return bfj
-          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
+          .write(paths.appBuildWeb + '/bundle-stats.json', stats.toJson())
           .then(() => resolve(resolveArgs))
           .catch(error => reject(new Error(error)));
       }
@@ -233,7 +233,7 @@ function build(previousFileSizes) {
 }
 
 function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appBuild, {
+  fs.copySync(paths.appPublic, paths.appBuildWeb, {
     dereference: true,
     filter: file => file !== paths.appHtml,
   });

From e9397e2dd86dc2df401f05709a2fbaaaaca2637f Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 13 Mar 2020 15:23:12 +0000
Subject: [PATCH 03/25] * Add support for development env SSR (start-ssr) *
 (Temporarily) added hard-source plugin * Write loadable-stats to disk for
 consumption by server

---
 packages/react-scripts/bin/react-scripts.js   |  3 +-
 .../react-scripts/config/webpack.config.js    |  4 +-
 .../config/webpack.config.ssr.js              | 10 ++--
 packages/react-scripts/package.json           |  2 +
 packages/react-scripts/scripts/init.js        |  1 +
 packages/react-scripts/scripts/start-ssr.js   | 56 +++++++++++++++++++
 packages/react-scripts/scripts/start.js       |  5 ++
 7 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 packages/react-scripts/scripts/start-ssr.js

diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js
index 84cc59b725..074cd73d49 100755
--- a/packages/react-scripts/bin/react-scripts.js
+++ b/packages/react-scripts/bin/react-scripts.js
@@ -19,7 +19,7 @@ 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 => x === 'build' || x === 'eject' || x === 'start' || x === 'start-ssr' || x === 'test'
 );
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
@@ -28,6 +28,7 @@ switch (script) {
   case 'build':
   case 'eject':
   case 'start':
+  case 'start-ssr':
   case 'test': {
     const result = spawn.sync(
       'node',
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 90780db3c3..8cbe978a03 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -35,6 +35,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const sassFunctions = require('bpk-mixins/sass-functions');
 const camelCase = require('lodash/camelCase');
@@ -184,7 +185,7 @@ module.exports = function(webpackEnv) {
       jsonpFunction: camelCase(pkgJson.name + 'JsonpCallback'),
       crossOriginLoading,
       // The build folder.
-      path: isEnvProduction ? paths.appBuildWeb : undefined,
+      path: paths.appBuildWeb,
       // Add /* filename */ comments to generated require()s in the output.
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
@@ -604,6 +605,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new HardSourceWebpackPlugin(),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 1cbeff094c..b25628eda8 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -35,6 +35,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const sassFunctions = require('bpk-mixins/sass-functions');
 // const camelCase = require('lodash/camelCase');
@@ -101,7 +102,7 @@ module.exports = function(webpackEnv) {
     preProcessorOptions = {}
   ) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvDevelopment && require.resolve('isomorphic-style-loader'),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
         options: Object.assign(
@@ -172,8 +173,8 @@ module.exports = function(webpackEnv) {
       // 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'),
-      isEnvDevelopment &&
-        require.resolve('react-dev-utils/webpackHotDevClient'),
+      // isEnvDevelopment &&
+      //   require.resolve('react-dev-utils/webpackHotDevClient'),
       // Finally, this is your app's code:
       // paths.appIndexJs,
       paths.appSsrJs,
@@ -183,7 +184,7 @@ module.exports = function(webpackEnv) {
     ].filter(Boolean),
     output: {
       // The build folder.
-      path: isEnvProduction ? paths.appBuildSsr : undefined,
+      path: paths.appBuildSsr,
       // Add /* filename */ comments to generated require()s in the output.
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
@@ -611,6 +612,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new HardSourceWebpackPlugin(),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       // new HtmlWebpackPlugin(
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 152ec662c1..0691154e26 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -40,8 +40,10 @@
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
+    "hard-source-webpack-plugin": "^0.13.1",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
+    "isomorphic-style-loader": "^5.1.0",
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 8a8e8c137c..0e0a9468a2 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/packages/react-scripts/scripts/init.js
@@ -96,6 +96,7 @@ module.exports = function(
   // Setup the script rules
   appPackage.scripts = {
     start: 'react-scripts start',
+    'start-ssr': 'react-scripts start-ssr',
     build: 'react-scripts build',
     test: 'react-scripts test',
     eject: 'react-scripts eject',
diff --git a/packages/react-scripts/scripts/start-ssr.js b/packages/react-scripts/scripts/start-ssr.js
new file mode 100644
index 0000000000..c6ff7241a1
--- /dev/null
+++ b/packages/react-scripts/scripts/start-ssr.js
@@ -0,0 +1,56 @@
+// @remove-on-eject-begin
+/**
+ * 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.
+ */
+// @remove-on-eject-end
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// 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;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+// @remove-on-eject-begin
+// Do the preflight check (only happens before eject).
+const verifyPackageTree = require('./utils/verifyPackageTree');
+if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
+  verifyPackageTree();
+}
+const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
+verifyTypeScriptSetup();
+// @remove-on-eject-end
+
+const fs = require('fs');
+const configFactory = require('../config/webpack.config.ssr');
+const { createCompiler } = require('react-dev-utils/WebpackDevServerUtils');
+const webpack = require('webpack');
+
+const paths = require('../config/paths');
+const config = configFactory('development');
+const appName = require(paths.appPackageJson).name;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+const compiler = createCompiler(webpack, config, 'acorn-webapp', appName, useYarn);
+
+compiler.watch(
+  {
+    ignored: ['node_modules'],
+  },
+  (err, stats) => {
+    if (err) {
+      console.log(err.message || err);
+      process.exit(1);
+    }
+  },
+);
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 7750c25a17..f6b2869791 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -105,6 +105,11 @@ checkBrowsers(paths.appPath, isInteractive)
       proxyConfig,
       urls.lanUrlForConfig
     );
+
+    serverConfig.writeToDisk = (filePath) => {
+      return /loadable-stats\.json/.test(filePath);
+    };
+
     const devServer = new WebpackDevServer(compiler, serverConfig);
     // Launch WebpackDevServer.
     devServer.listen(port, HOST, err => {

From fcbd1501ea2f4bf9f17270477bd5d2c6e955516d Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 13 Mar 2020 18:47:08 +0000
Subject: [PATCH 04/25] CSS loaders for browserless env, hard source excludes
 as recommended

---
 packages/react-scripts/config/webpack.config.js   | 10 ++++++++++
 .../react-scripts/config/webpack.config.ssr.js    | 15 ++++++++++++---
 packages/react-scripts/package.json               |  1 -
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 8cbe978a03..80bf8e2a3d 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -606,6 +606,16 @@ module.exports = function(webpackEnv) {
     },
     plugins: [
       new HardSourceWebpackPlugin(),
+      new HardSourceWebpackPlugin.ExcludeModulePlugin([
+        {
+            // HardSource works with mini-css-extract-plugin but due to how
+            // mini-css emits assets, assets are not emitted on repeated builds with
+            // mini-css and hard-source together. Ignoring the mini-css loader
+            // modules, but not the other css loader modules, excludes the modules
+            // that mini-css needs rebuilt to output assets every time.
+            test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
+        },
+      ]),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index b25628eda8..f7f9fdb0f9 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -102,7 +102,6 @@ module.exports = function(webpackEnv) {
     preProcessorOptions = {}
   ) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('isomorphic-style-loader'),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
         options: Object.assign(
@@ -111,7 +110,7 @@ module.exports = function(webpackEnv) {
         ),
       },
       {
-        loader: require.resolve('css-loader'),
+        loader: require.resolve('css-loader/locals'),
         options: cssOptions,
       },
       {
@@ -613,6 +612,16 @@ module.exports = function(webpackEnv) {
     },
     plugins: [
       new HardSourceWebpackPlugin(),
+      new HardSourceWebpackPlugin.ExcludeModulePlugin([
+        {
+            // HardSource works with mini-css-extract-plugin but due to how
+            // mini-css emits assets, assets are not emitted on repeated builds with
+            // mini-css and hard-source together. Ignoring the mini-css loader
+            // modules, but not the other css loader modules, excludes the modules
+            // that mini-css needs rebuilt to output assets every time.
+            test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
+        },
+      ]),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       // new HtmlWebpackPlugin(
@@ -662,7 +671,7 @@ module.exports = function(webpackEnv) {
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
       // This is necessary to emit hot updates (currently CSS only):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 0691154e26..76dca010f5 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -43,7 +43,6 @@
     "hard-source-webpack-plugin": "^0.13.1",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
-    "isomorphic-style-loader": "^5.1.0",
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",

From 6efddf04c791407c3770c8266477f4bb96528a46 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 13 Mar 2020 20:31:39 +0000
Subject: [PATCH 05/25] Build marker files, hash JS to prevent in-place
 modification on code change

---
 packages/react-scripts/config/webpack.config.ssr.js | 4 ++--
 packages/react-scripts/scripts/start-ssr.js         | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index f7f9fdb0f9..a97c0cf622 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -191,12 +191,12 @@ module.exports = function(webpackEnv) {
       // filename: isEnvProduction
       //   ? 'static/js/[name].[chunkhash:8].js'
       //   : isEnvDevelopment && 'static/js/bundle.js',
-      filename: 'ssr.js',
+      filename: 'ssr.[hash:8].js',
       libraryTarget: 'commonjs2',
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
         ? 'static/js/[name].[chunkhash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
+        : isEnvDevelopment && 'static/js/[name].[chunkhash:8].chunk.js',
       // We inferred the "public path" (such as / or /my-project) from homepage.
       // We use "/" in development.
       publicPath: publicPath,
diff --git a/packages/react-scripts/scripts/start-ssr.js b/packages/react-scripts/scripts/start-ssr.js
index c6ff7241a1..fdb32697a7 100644
--- a/packages/react-scripts/scripts/start-ssr.js
+++ b/packages/react-scripts/scripts/start-ssr.js
@@ -31,6 +31,7 @@ const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
 verifyTypeScriptSetup();
 // @remove-on-eject-end
 
+const path = require('path');
 const fs = require('fs');
 const configFactory = require('../config/webpack.config.ssr');
 const { createCompiler } = require('react-dev-utils/WebpackDevServerUtils');
@@ -54,3 +55,11 @@ compiler.watch(
     }
   },
 );
+
+compiler.hooks.invalid.tap('invalid', () => {
+  fs.writeFileSync(path.join(paths.appBuildSsr, '.build-invalidated'), Date.now());
+});
+
+compiler.hooks.done.tap('done', () => {
+  fs.writeFileSync(path.join(paths.appBuildSsr, '.build-done'), Date.now());
+});

From e1a1f1c0a6d1b40ee4d323edcccff2ee5176d781 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 13 Mar 2020 21:06:44 +0000
Subject: [PATCH 06/25] iconv ignore

---
 packages/react-scripts/config/webpack.config.ssr.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index a97c0cf622..758972384d 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -611,6 +611,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new webpack.IgnorePlugin(/\/iconv-loader$/), // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       new HardSourceWebpackPlugin(),
       new HardSourceWebpackPlugin.ExcludeModulePlugin([
         {

From ace0ea82232d9dcf21b0ed92f72095bc3ed2052a Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Sat, 14 Mar 2020 00:37:10 +0000
Subject: [PATCH 07/25] No mini css extract plugin for SSR

---
 .../react-scripts/config/webpack.config.ssr.js    | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 758972384d..13082a6d2c 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -102,13 +102,6 @@ module.exports = function(webpackEnv) {
     preProcessorOptions = {}
   ) => {
     const loaders = [
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-        options: Object.assign(
-          {},
-          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
-        ),
-      },
       {
         loader: require.resolve('css-loader/locals'),
         options: cssOptions,
@@ -683,14 +676,6 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          // filename: 'static/css/[name].[contenthash:8].css',
-          filename: 'ssr.css',
-          // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-        }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without
       // having to parse `index.html`.

From e249d510f87200800b132f7266a0fb74de54f940 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Mon, 16 Mar 2020 10:13:42 +0000
Subject: [PATCH 08/25] Nicer diff

---
 .../react-scripts/config/webpack.config.ssr.js   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 13082a6d2c..315df34081 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -102,6 +102,14 @@ module.exports = function(webpackEnv) {
     preProcessorOptions = {}
   ) => {
     const loaders = [
+      // isEnvDevelopment && require.resolve('style-loader'),	
+      // isEnvProduction && {	
+      //   loader: MiniCssExtractPlugin.loader,	
+      //   options: Object.assign(	
+      //     {},	
+      //     shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined	
+      //   ),	
+      // },
       {
         loader: require.resolve('css-loader/locals'),
         options: cssOptions,
@@ -676,6 +684,14 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      // isEnvProduction &&	
+      //   new MiniCssExtractPlugin({	
+      //     // Options similar to the same options in webpackOptions.output	
+      //     // both options are optional	
+      //     // filename: 'static/css/[name].[contenthash:8].css',	
+      //     filename: 'ssr.css',	
+      //     // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',	
+      //   }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without
       // having to parse `index.html`.

From 10a93959c7045cf49495f3a98b9a139abcf7d452 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Mon, 16 Mar 2020 10:15:23 +0000
Subject: [PATCH 09/25] whitespace

---
 .../config/webpack.config.ssr.js              | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 315df34081..0347b1ddf1 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -102,13 +102,13 @@ module.exports = function(webpackEnv) {
     preProcessorOptions = {}
   ) => {
     const loaders = [
-      // isEnvDevelopment && require.resolve('style-loader'),	
-      // isEnvProduction && {	
-      //   loader: MiniCssExtractPlugin.loader,	
-      //   options: Object.assign(	
-      //     {},	
-      //     shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined	
-      //   ),	
+      // isEnvDevelopment && require.resolve('style-loader'),
+      // isEnvProduction && {
+      //   loader: MiniCssExtractPlugin.loader,
+      //   options: Object.assign(
+      //     {},
+      //     shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
+      //   ),
       // },
       {
         loader: require.resolve('css-loader/locals'),
@@ -685,12 +685,12 @@ module.exports = function(webpackEnv) {
       isEnvDevelopment &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       // isEnvProduction &&	
-      //   new MiniCssExtractPlugin({	
-      //     // Options similar to the same options in webpackOptions.output	
-      //     // both options are optional	
-      //     // filename: 'static/css/[name].[contenthash:8].css',	
-      //     filename: 'ssr.css',	
-      //     // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',	
+      //   new MiniCssExtractPlugin({
+      //     // Options similar to the same options in webpackOptions.output
+      //     // both options are optional
+      //     // filename: 'static/css/[name].[contenthash:8].css',
+      //     filename: 'ssr.css',
+      //     // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
       //   }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without

From 84e858046c5ababb6a361a1637cad3418d8b333f Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Mon, 16 Mar 2020 10:20:39 +0000
Subject: [PATCH 10/25] Whitespace

---
 packages/react-scripts/config/webpack.config.ssr.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 0347b1ddf1..270eeaaded 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -684,7 +684,7 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      // isEnvProduction &&	
+      // isEnvProduction &&
       //   new MiniCssExtractPlugin({
       //     // Options similar to the same options in webpackOptions.output
       //     // both options are optional

From d9578f8c4630746d297bd173566dca30c502a925 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Mon, 16 Mar 2020 13:32:07 +0000
Subject: [PATCH 11/25] require.resolve babel plugin

---
 packages/react-scripts/config/webpack.config.js     | 2 +-
 packages/react-scripts/config/webpack.config.ssr.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 80bf8e2a3d..0c8f60158d 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -431,7 +431,7 @@ module.exports = function(webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
-                  "@loadable/babel-plugin",
+                  require.resolve('@loadable/babel-plugin'),
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 270eeaaded..5fb5e47d33 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -438,7 +438,7 @@ module.exports = function(webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
-                  "@loadable/babel-plugin",
+                  require.resolve('@loadable/babel-plugin'),
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {

From 6cefe2fffff2588a65ec0c63f641030d1e8884e7 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Mon, 16 Mar 2020 18:10:44 +0000
Subject: [PATCH 12/25] Register hooks first, for both SSR and non-SSR

---
 packages/react-scripts/scripts/start-ssr.js   | 22 ++++++++-----------
 packages/react-scripts/scripts/start.js       |  8 ++++++-
 .../scripts/utils/registerStatusFileHooks.js  | 18 +++++++++++++++
 3 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 packages/react-scripts/scripts/utils/registerStatusFileHooks.js

diff --git a/packages/react-scripts/scripts/start-ssr.js b/packages/react-scripts/scripts/start-ssr.js
index fdb32697a7..6d8cc8f523 100644
--- a/packages/react-scripts/scripts/start-ssr.js
+++ b/packages/react-scripts/scripts/start-ssr.js
@@ -31,35 +31,31 @@ const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
 verifyTypeScriptSetup();
 // @remove-on-eject-end
 
-const path = require('path');
 const fs = require('fs');
-const configFactory = require('../config/webpack.config.ssr');
 const { createCompiler } = require('react-dev-utils/WebpackDevServerUtils');
 const webpack = require('webpack');
 
+const configFactory = require('../config/webpack.config.ssr');
 const paths = require('../config/paths');
+
+const registerStatusFileHooks = require('./utils/registerStatusFileHooks');
+
 const config = configFactory('development');
 const appName = require(paths.appPackageJson).name;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
-const compiler = createCompiler(webpack, config, 'acorn-webapp', appName, useYarn);
+const compiler = createCompiler(webpack, config, appName, undefined, useYarn);
+
+registerStatusFileHooks(compiler);
 
 compiler.watch(
   {
     ignored: ['node_modules'],
   },
-  (err, stats) => {
+  err => {
     if (err) {
       console.log(err.message || err);
       process.exit(1);
     }
-  },
+  }
 );
-
-compiler.hooks.invalid.tap('invalid', () => {
-  fs.writeFileSync(path.join(paths.appBuildSsr, '.build-invalidated'), Date.now());
-});
-
-compiler.hooks.done.tap('done', () => {
-  fs.writeFileSync(path.join(paths.appBuildSsr, '.build-done'), Date.now());
-});
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index f6b2869791..372ee49fc8 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -31,6 +31,7 @@ const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
 verifyTypeScriptSetup();
 // @remove-on-eject-end
 
+const path = require('path');
 const fs = require('fs');
 const chalk = require('chalk');
 const webpack = require('webpack');
@@ -48,6 +49,8 @@ const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 
+const registerStatusFileHooks = require('./utils/registerStatusFileHooks');
+
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
@@ -97,6 +100,9 @@ checkBrowsers(paths.appPath, isInteractive)
     const urls = prepareUrls(protocol, HOST, port);
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+
+    registerStatusFileHooks(compiler);
+
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
@@ -106,7 +112,7 @@ checkBrowsers(paths.appPath, isInteractive)
       urls.lanUrlForConfig
     );
 
-    serverConfig.writeToDisk = (filePath) => {
+    serverConfig.writeToDisk = filePath => {
       return /loadable-stats\.json/.test(filePath);
     };
 
diff --git a/packages/react-scripts/scripts/utils/registerStatusFileHooks.js b/packages/react-scripts/scripts/utils/registerStatusFileHooks.js
new file mode 100644
index 0000000000..5d9e908076
--- /dev/null
+++ b/packages/react-scripts/scripts/utils/registerStatusFileHooks.js
@@ -0,0 +1,18 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const paths = require('../../config/paths');
+
+module.exports = function(compiler) {
+  compiler.hooks.invalid.tap('invalid', () => {
+    fs.writeFileSync(
+      path.join(paths.appBuildSsr, '.build-status'),
+      'IN_PROGRESS'
+    );
+  });
+  compiler.hooks.done.tap('done', () => {
+    fs.writeFileSync(path.join(paths.appBuildSsr, '.build-status'), 'DONE');
+  });
+};

From 722bc627c073d205581c0a306840be20b569e455 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Mon, 16 Mar 2020 19:08:07 +0000
Subject: [PATCH 13/25] Status file tweaks

---
 packages/react-scripts/package.json           |  1 +
 packages/react-scripts/scripts/start-ssr.js   |  7 +++--
 packages/react-scripts/scripts/start.js       |  6 ++--
 .../scripts/utils/registerStatusFileHooks.js  | 18 -----------
 .../react-scripts/scripts/utils/statusFile.js | 31 +++++++++++++++++++
 5 files changed, 38 insertions(+), 25 deletions(-)
 delete mode 100644 packages/react-scripts/scripts/utils/registerStatusFileHooks.js
 create mode 100644 packages/react-scripts/scripts/utils/statusFile.js

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 76dca010f5..29ab99a00b 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -48,6 +48,7 @@
     "jest-resolve": "23.6.0",
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "0.4.3",
+    "mkdirp": "^1.0.3",
     "node-sass": "4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.1.0",
diff --git a/packages/react-scripts/scripts/start-ssr.js b/packages/react-scripts/scripts/start-ssr.js
index 6d8cc8f523..03a3fa5188 100644
--- a/packages/react-scripts/scripts/start-ssr.js
+++ b/packages/react-scripts/scripts/start-ssr.js
@@ -38,15 +38,14 @@ const webpack = require('webpack');
 const configFactory = require('../config/webpack.config.ssr');
 const paths = require('../config/paths');
 
-const registerStatusFileHooks = require('./utils/registerStatusFileHooks');
+const statusFile = require('./utils/statusFile');
 
 const config = configFactory('development');
 const appName = require(paths.appPackageJson).name;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
 const compiler = createCompiler(webpack, config, appName, undefined, useYarn);
-
-registerStatusFileHooks(compiler);
+statusFile.init(compiler, paths.appBuildSsr);
 
 compiler.watch(
   {
@@ -57,5 +56,7 @@ compiler.watch(
       console.log(err.message || err);
       process.exit(1);
     }
+
+    statusFile.done(paths.appBuildSsr);
   }
 );
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 372ee49fc8..97a80bea63 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -31,7 +31,6 @@ const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
 verifyTypeScriptSetup();
 // @remove-on-eject-end
 
-const path = require('path');
 const fs = require('fs');
 const chalk = require('chalk');
 const webpack = require('webpack');
@@ -49,7 +48,7 @@ const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 
-const registerStatusFileHooks = require('./utils/registerStatusFileHooks');
+const statusFile = require('./utils/statusFile');
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
@@ -100,8 +99,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const urls = prepareUrls(protocol, HOST, port);
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
-
-    registerStatusFileHooks(compiler);
+    statusFile.init(compiler, paths.appBuildWeb);
 
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
diff --git a/packages/react-scripts/scripts/utils/registerStatusFileHooks.js b/packages/react-scripts/scripts/utils/registerStatusFileHooks.js
deleted file mode 100644
index 5d9e908076..0000000000
--- a/packages/react-scripts/scripts/utils/registerStatusFileHooks.js
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
-const paths = require('../../config/paths');
-
-module.exports = function(compiler) {
-  compiler.hooks.invalid.tap('invalid', () => {
-    fs.writeFileSync(
-      path.join(paths.appBuildSsr, '.build-status'),
-      'IN_PROGRESS'
-    );
-  });
-  compiler.hooks.done.tap('done', () => {
-    fs.writeFileSync(path.join(paths.appBuildSsr, '.build-status'), 'DONE');
-  });
-};
diff --git a/packages/react-scripts/scripts/utils/statusFile.js b/packages/react-scripts/scripts/utils/statusFile.js
new file mode 100644
index 0000000000..f918867a24
--- /dev/null
+++ b/packages/react-scripts/scripts/utils/statusFile.js
@@ -0,0 +1,31 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const mkdirp = require('mkdirp');
+
+function statusFilePath(buildPath) {
+  return path.join(buildPath, '.build-status');
+}
+
+function done(buildPath) {
+  fs.writeFileSync(statusFilePath(buildPath), 'DONE');
+}
+
+function inProgress(buildPath) {
+  fs.writeFileSync(statusFilePath(buildPath), 'IN_PROGRESS');
+}
+
+exports.init = function(compiler, buildPath) {
+  mkdirp.sync(buildPath);
+  inProgress(buildPath);
+
+  compiler.hooks.invalid.tap('invalid', () => {
+    inProgress(buildPath);
+  });
+  compiler.hooks.done.tap('done', () => {
+    done(buildPath);
+  });
+};
+
+exports.done = done;

From ed4062ed6882cd848ff535d7b13fc863fec73cf7 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Tue, 17 Mar 2020 08:11:30 +0000
Subject: [PATCH 14/25] Make hard source plugin switchable

---
 .../react-scripts/config/webpack.config.js    | 26 ++++++++++++-------
 .../config/webpack.config.ssr.js              | 14 ++++++----
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 0c8f60158d..36b12a3416 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -57,6 +57,9 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+// We might not want to use the hard source plugin on environments that won't persist the cache for later
+const useHardSourceWebpackPlugin =
+  process.env.USE_HARD_SOURCE_WEBPACK_PLUGIN === 'true';
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -283,11 +286,13 @@ module.exports = function(webpackEnv) {
         ? {
             chunks: 'all',
             name: false,
-            cacheGroups: bpkReactScriptsConfig.vendorsChunkRegex ? {
-              vendors: {
-                test: new RegExp(bpkReactScriptsConfig.vendorsChunkRegex),
-              },
-            } : {},
+            cacheGroups: bpkReactScriptsConfig.vendorsChunkRegex
+              ? {
+                  vendors: {
+                    test: new RegExp(bpkReactScriptsConfig.vendorsChunkRegex),
+                  },
+                }
+              : {},
           }
         : {},
       // Keep the runtime chunk seperated to enable long term caching
@@ -605,17 +610,18 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
-      new HardSourceWebpackPlugin(),
-      new HardSourceWebpackPlugin.ExcludeModulePlugin([
-        {
+      useHardSourceWebpackPlugin && new HardSourceWebpackPlugin(),
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin.ExcludeModulePlugin([
+          {
             // HardSource works with mini-css-extract-plugin but due to how
             // mini-css emits assets, assets are not emitted on repeated builds with
             // mini-css and hard-source together. Ignoring the mini-css loader
             // modules, but not the other css loader modules, excludes the modules
             // that mini-css needs rebuilt to output assets every time.
             test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
-        },
-      ]),
+          },
+        ]),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 5fb5e47d33..392dba2c7d 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -56,6 +56,9 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 // const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+// We might not want to use the hard source plugin on environments that won't persist the cache for later
+const useHardSourceWebpackPlugin =
+  process.env.USE_HARD_SOURCE_WEBPACK_PLUGIN === 'true';
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -613,17 +616,18 @@ module.exports = function(webpackEnv) {
     },
     plugins: [
       new webpack.IgnorePlugin(/\/iconv-loader$/), // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
-      new HardSourceWebpackPlugin(),
-      new HardSourceWebpackPlugin.ExcludeModulePlugin([
-        {
+      useHardSourceWebpackPlugin && new HardSourceWebpackPlugin(),
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin.ExcludeModulePlugin([
+          {
             // HardSource works with mini-css-extract-plugin but due to how
             // mini-css emits assets, assets are not emitted on repeated builds with
             // mini-css and hard-source together. Ignoring the mini-css loader
             // modules, but not the other css loader modules, excludes the modules
             // that mini-css needs rebuilt to output assets every time.
             test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
-        },
-      ]),
+          },
+        ]),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       // new HtmlWebpackPlugin(

From ad4c053a13f5129e7240e3c99f460071ce715421 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Wed, 25 Mar 2020 11:12:00 +0000
Subject: [PATCH 15/25] Hard source environmentHash allowing for standalone BRS
 install optimisation, definePlugin typeof window

---
 packages/react-scripts/config/environmentHash.js  | 15 +++++++++++++++
 packages/react-scripts/config/webpack.config.js   |  9 +++++++--
 .../react-scripts/config/webpack.config.ssr.js    | 13 +++++++++----
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 packages/react-scripts/config/environmentHash.js

diff --git a/packages/react-scripts/config/environmentHash.js b/packages/react-scripts/config/environmentHash.js
new file mode 100644
index 0000000000..2ff71f01c4
--- /dev/null
+++ b/packages/react-scripts/config/environmentHash.js
@@ -0,0 +1,15 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const reactScriptsRoot = path.resolve(__dirname, '..');
+const haveIsolatedDependencies =
+  fs.existsSync(path.join(reactScriptsRoot, 'package-lock.json')) ||
+  fs.existsSync(path.join(reactScriptsRoot, 'yarn.lock'));
+
+module.exports = {
+  root: haveIsolatedDependencies ? reactScriptsRoot : process.cwd(),
+  directories: [],
+  files: ['package-lock.json', 'yarn.lock'],
+};
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 36b12a3416..e2efae4c23 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -60,6 +60,7 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 // We might not want to use the hard source plugin on environments that won't persist the cache for later
 const useHardSourceWebpackPlugin =
   process.env.USE_HARD_SOURCE_WEBPACK_PLUGIN === 'true';
+const environmentHash = require('./environmentHash');
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -610,7 +611,8 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
-      useHardSourceWebpackPlugin && new HardSourceWebpackPlugin(),
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin({ environmentHash }),
       useHardSourceWebpackPlugin &&
         new HardSourceWebpackPlugin.ExcludeModulePlugin([
           {
@@ -689,7 +691,10 @@ module.exports = function(webpackEnv) {
       // It is absolutely essential that NODE_ENV is set to production
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
+      new webpack.DefinePlugin({
+        ...env.stringified,
+        'typeof window': '"object"',
+      }),
       // This is necessary to emit hot updates (currently CSS only):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Watcher doesn't work well if you mistype casing in a path so we use
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 392dba2c7d..c4b7529ac9 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -17,7 +17,7 @@ const PnpWebpackPlugin = require('pnp-webpack-plugin');
 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 MiniCssExtractPlugin = require('mini-css-extract-plugin');
 // const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 // const safePostCssParser = require('postcss-safe-parser');
 // const ManifestPlugin = require('webpack-manifest-plugin');
@@ -59,6 +59,7 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // We might not want to use the hard source plugin on environments that won't persist the cache for later
 const useHardSourceWebpackPlugin =
   process.env.USE_HARD_SOURCE_WEBPACK_PLUGIN === 'true';
+const environmentHash = require('./environmentHash');
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -87,7 +88,7 @@ module.exports = function(webpackEnv) {
     : isEnvDevelopment && '/';
   // Some apps do not use client-side routing with pushState.
   // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
+  // const shouldUseRelativeAssetPaths = publicPath === './';
 
   // `publicUrl` is just like `publicPath`, but we will provide it to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
@@ -616,7 +617,8 @@ module.exports = function(webpackEnv) {
     },
     plugins: [
       new webpack.IgnorePlugin(/\/iconv-loader$/), // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
-      useHardSourceWebpackPlugin && new HardSourceWebpackPlugin(),
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin({ environmentHash }),
       useHardSourceWebpackPlugin &&
         new HardSourceWebpackPlugin.ExcludeModulePlugin([
           {
@@ -675,7 +677,10 @@ module.exports = function(webpackEnv) {
       // It is absolutely essential that NODE_ENV is set to production
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
+      new webpack.DefinePlugin({
+        ...env.stringified,
+        'typeof window': '"undefined"',
+      }),
       // This is necessary to emit hot updates (currently CSS only):
       // isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Watcher doesn't work well if you mistype casing in a path so we use

From 6f76253ef02b2f590492967c8548a0a86f369361 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Thu, 2 Apr 2020 19:10:16 +0100
Subject: [PATCH 16/25] Fix iconv loader

---
 packages/react-scripts/config/webpack.config.ssr.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index c4b7529ac9..9359c4518e 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -350,6 +350,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     module: {
+      noParse: /iconv-loader\.js$/, // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       strictExportPresence: true,
       rules: [
         // Disable require.ensure as it's not a standard language feature.
@@ -616,7 +617,6 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
-      new webpack.IgnorePlugin(/\/iconv-loader$/), // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       useHardSourceWebpackPlugin &&
         new HardSourceWebpackPlugin({ environmentHash }),
       useHardSourceWebpackPlugin &&

From 83e5434884e044520c7fe255b0e678d68ab9917f Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 3 Apr 2020 11:15:46 +0100
Subject: [PATCH 17/25] iconv fix needed for non-SSR too to prevent warning

---
 packages/react-scripts/config/webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index e2efae4c23..6848833750 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -345,6 +345,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     module: {
+      noParse: /iconv-loader\.js$/, // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       strictExportPresence: true,
       rules: [
         // Disable require.ensure as it's not a standard language feature.

From a3d057ee57f84e8ef06e044c0261f1599b92f8aa Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 17 Apr 2020 16:53:43 +0100
Subject: [PATCH 18/25] Update CHANGELOG.md

---
 packages/react-scripts/CHANGELOG.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index 593bfc2484..ab587777a9 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,8 +1,14 @@
 # `backpack-react-scripts` Change Log
 
-## 7.0.6 (Pending)
+## 8.0.0 (Pending)
 
 - Added support for loadable components.
+- Added start-ssr command, to produce Node.js-compatible watched output. Several changes to SSR webpack config to support.
+- Defined `typeof window` for browser and SSR environments, enabling dead code elimination (https://webpack.js.org/plugins/define-plugin/#usage)
+- SSR output always include hash as part of filename
+- Added experimental support for https://github.com/mzgoddard/hard-source-webpack-plugin/, enabled by `USE_HARD_SOURCE_WEBPACK_PLUGIN=true` environment variable
+- `web` and `ssr` subpaths for each build's output
+- Output build 'status files' (`.build-status`, one for web, one for SSR), which can be watched by a Node.js server to know when builds are in progress or completed.
 
 ## 7.0.5 - 2020-01-10
 

From 588ef25eda749b5e3e6cce93c76aa9551f695bd7 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 17 Apr 2020 16:55:10 +0100
Subject: [PATCH 19/25] Update CHANGELOG.md

---
 packages/react-scripts/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index ab587777a9..a57d1c47e8 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## 8.0.0 (Pending)
 
 - Added support for loadable components.
-- Added start-ssr command, to produce Node.js-compatible watched output. Several changes to SSR webpack config to support.
+- Added `start-ssr` command, to produce Node.js-compatible watched output. Several changes to SSR webpack config to support.
 - Defined `typeof window` for browser and SSR environments, enabling dead code elimination (https://webpack.js.org/plugins/define-plugin/#usage)
 - SSR output always include hash as part of filename
 - Added experimental support for https://github.com/mzgoddard/hard-source-webpack-plugin/, enabled by `USE_HARD_SOURCE_WEBPACK_PLUGIN=true` environment variable

From 2d5263204dc47fe6bd7e8e51fa91e788d21478f4 Mon Sep 17 00:00:00 2001
From: Andrew Jones <ajones513@users.noreply.github.com>
Date: Fri, 17 Apr 2020 16:56:51 +0100
Subject: [PATCH 20/25] Update CHANGELOG.md

---
 packages/react-scripts/CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index a57d1c47e8..d7f331a8ab 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -3,9 +3,9 @@
 ## 8.0.0 (Pending)
 
 - Added support for loadable components.
-- Added `start-ssr` command, to produce Node.js-compatible watched output. Several changes to SSR webpack config to support.
+- Added `start-ssr` command, to produce Node.js-compatible watched output. Several changes to SSR Webpack config to support.
 - Defined `typeof window` for browser and SSR environments, enabling dead code elimination (https://webpack.js.org/plugins/define-plugin/#usage)
-- SSR output always include hash as part of filename
+- SSR output always includes hash as part of filename
 - Added experimental support for https://github.com/mzgoddard/hard-source-webpack-plugin/, enabled by `USE_HARD_SOURCE_WEBPACK_PLUGIN=true` environment variable
 - `web` and `ssr` subpaths for each build's output
 - Output build 'status files' (`.build-status`, one for web, one for SSR), which can be watched by a Node.js server to know when builds are in progress or completed.

From 71ed29482dd177c3924748db001b567d303aa24e Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Wed, 24 Jun 2020 09:03:41 +0100
Subject: [PATCH 21/25] Adding new ignore option

---
 packages/react-scripts/CHANGELOG.md                 | 1 +
 packages/react-scripts/README.md                    | 1 +
 packages/react-scripts/config/webpack.config.js     | 2 ++
 packages/react-scripts/config/webpack.config.ssr.js | 1 +
 packages/react-scripts/package.json                 | 4 ++--
 5 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index d7f331a8ab..51dd49e65f 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added experimental support for https://github.com/mzgoddard/hard-source-webpack-plugin/, enabled by `USE_HARD_SOURCE_WEBPACK_PLUGIN=true` environment variable
 - `web` and `ssr` subpaths for each build's output
 - Output build 'status files' (`.build-status`, one for web, one for SSR), which can be watched by a Node.js server to know when builds are in progress or completed.
+- Added `ignoreCssWarnings` config item to allow the ability to supress CSS ordering issues when its safe to allow mixed order when it has not effect on output. https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings
 
 ## 7.0.5 - 2020-01-10
 
diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md
index b29f21e13c..23e131c83f 100644
--- a/packages/react-scripts/README.md
+++ b/packages/react-scripts/README.md
@@ -30,6 +30,7 @@ npm start
   - `externals`: exposing the Webpack config to modify externals, see [docs](https://webpack.js.org/configuration/externals/).
   - `ssrExternals`: Similar to above, but for `ssr.js` only.
   - `cssModules`: Boolean, true by default.
+  - `ignoreCssWarnings`: Boolean, false by default. Allows the ability to supress CSS ordering issues when its safe to allow mixed order when it has not effect on output, see [docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings). False by default
 
 ## Releasing a new version of `backpack-react-scripts`
 
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 6848833750..fafe1d57d9 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -51,6 +51,7 @@ const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
 
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
 const crossOriginLoading = bpkReactScriptsConfig.crossOriginLoading || false;
+const supressCssWarnings = bpkReactScriptsConfig.ignoreCssWarnings || false;
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -714,6 +715,7 @@ module.exports = function(webpackEnv) {
           // both options are optional
           filename: 'static/css/[name].[contenthash:8].css',
           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+          ignoreOrder: supressCssWarnings,
         }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 9359c4518e..621b3dc4e5 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -700,6 +700,7 @@ module.exports = function(webpackEnv) {
       //     // filename: 'static/css/[name].[contenthash:8].css',
       //     filename: 'ssr.css',
       //     // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      //     // ignoreOrder: true,
       //   }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 29ab99a00b..c3f572fe09 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backpack-react-scripts",
-  "version": "7.0.5",
+  "version": "7.1.0-alpha.5e6feadc",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": "Skyscanner/backpack-react-scripts",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
     "lodash": "^4.17.11",
-    "mini-css-extract-plugin": "0.4.3",
+    "mini-css-extract-plugin": "0.8.0",
     "mkdirp": "^1.0.3",
     "node-sass": "4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",

From 6d0ee70795e8c9453eae87424f69b5c4bae7eae8 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Wed, 23 Sep 2020 11:04:56 +0100
Subject: [PATCH 22/25] Adding colors to noParse

---
 packages/react-scripts/config/webpack.config.js     | 2 +-
 packages/react-scripts/config/webpack.config.ssr.js | 2 +-
 packages/react-scripts/package.json                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index fafe1d57d9..b4cef01279 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -346,7 +346,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     module: {
-      noParse: /iconv-loader\.js$/, // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
+      noParse: [/iconv-loader\.js$/, /colors\.js$/], // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       strictExportPresence: true,
       rules: [
         // Disable require.ensure as it's not a standard language feature.
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 621b3dc4e5..6f7bf21d72 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -350,7 +350,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     module: {
-      noParse: /iconv-loader\.js$/, // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
+      noParse: [/iconv-loader\.js$/, /colors\.js$/], // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       strictExportPresence: true,
       rules: [
         // Disable require.ensure as it's not a standard language feature.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index c3f572fe09..594df7d2a2 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backpack-react-scripts",
-  "version": "7.1.0-alpha.5e6feadc",
+  "version": "7.1.0-alpha.d510ff8a",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": "Skyscanner/backpack-react-scripts",
   "license": "MIT",

From b958ecac63b6dc757529112100aa814c672c7c28 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Wed, 23 Sep 2020 17:50:04 +0100
Subject: [PATCH 23/25] Revert - Adding colors to noParse

---
 packages/react-scripts/config/webpack.config.js     | 2 +-
 packages/react-scripts/config/webpack.config.ssr.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index b4cef01279..fafe1d57d9 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -346,7 +346,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     module: {
-      noParse: [/iconv-loader\.js$/, /colors\.js$/], // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
+      noParse: /iconv-loader\.js$/, // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       strictExportPresence: true,
       rules: [
         // Disable require.ensure as it's not a standard language feature.
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 6f7bf21d72..621b3dc4e5 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -350,7 +350,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     module: {
-      noParse: [/iconv-loader\.js$/, /colors\.js$/], // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
+      noParse: /iconv-loader\.js$/, // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
       strictExportPresence: true,
       rules: [
         // Disable require.ensure as it's not a standard language feature.

From f4cb8c352afcb4fd25c898d099a7d504a0473401 Mon Sep 17 00:00:00 2001
From: Oliver Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Tue, 15 Jun 2021 09:44:41 +0100
Subject: [PATCH 24/25] [NO JIRA]: Backport updates

---
 packages/react-scripts/CHANGELOG.md                    |  3 ++-
 packages/react-scripts/README.md                       |  2 +-
 packages/react-scripts/config/webpack.config.js        | 10 ++++++----
 packages/react-scripts/config/webpack.config.ssr.js    | 10 ++++++----
 .../react-scripts/scripts/utils/createJestConfig.js    |  1 +
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index 51dd49e65f..453b560f2a 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,7 +1,8 @@
 # `backpack-react-scripts` Change Log
 
-## 8.0.0 (Pending)
+## 8.1.0 (Pending)
 
+- BACKPORT: Added support for Backpack Foundations.
 - Added support for loadable components.
 - Added `start-ssr` command, to produce Node.js-compatible watched output. Several changes to SSR Webpack config to support.
 - Defined `typeof window` for browser and SSR environments, enabling dead code elimination (https://webpack.js.org/plugins/define-plugin/#usage)
diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md
index 23e131c83f..d70a9825ba 100644
--- a/packages/react-scripts/README.md
+++ b/packages/react-scripts/README.md
@@ -23,7 +23,7 @@ npm start
 - **`css.html` & `js.html`**: New files in the `build/` output folder. These are html partials that include `<script />` and `<link />` references to the various static assets output by webpack. Useful if automatic chunking is turned on and you don't want to worry about order.
 - A bunch of configuration options via `"backpack-react-scripts"` field in `package.json`:
   - `crossOriginLoading`: Modify the default behaviour, see [docs](https://webpack.js.org/configuration/output/#output-crossoriginloading).
-  - `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation. Includes `["bpk-", "saddlebag-"]` by default.
+  - `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation. Includes `["@skyscanner-", "bpk-", "saddlebag-"]` by default.
   - `enableAutomaticChunking`: Boolean, opt in to automatic chunking of vendor, common and app code.
   - `vendorsChunkRegex`: String, Regex for picking what goes into the `vendors` chunk. See `cacheGroups` in webpack docs. Dependent on `enableAutomaticChunking` being enabled
   - `amdExcludes`: Array of module names to exclude from AMD parsing. Incldues `["lodash"]` by default.
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index fafe1d57d9..5bd1b0c498 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -75,6 +75,7 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
 // Backpack / saddlebag node module regexes
 const backpackModulesRegex = /node_modules[\\/]bpk-/;
 const saddlebagModulesRegex = /node_modules[\\/]saddlebag-/;
+const scopedBackpackModulesRegex = /node_modules[\\/]@skyscanner[\\/]bpk-/;
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -410,6 +411,7 @@ module.exports = function(webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
@@ -508,7 +510,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -530,7 +532,7 @@ module.exports = function(webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [cssRegex, backpackModulesRegex, scopedBackpackModulesRegex],
                 },
               ],
               use: getStyleLoaders({
@@ -546,7 +548,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
@@ -574,7 +576,7 @@ module.exports = function(webpackEnv) {
                   and: [sassRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [sassRegex, backpackModulesRegex],
+                  and: [sassRegex, backpackModulesRegex, scopedBackpackModulesRegex],
                 },
               ],
               use: getStyleLoaders(
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 621b3dc4e5..60a1285cc0 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -73,6 +73,7 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
 // Backpack / saddlebag node module regexes
 const backpackModulesRegex = /node_modules[\\/]bpk-/;
 const saddlebagModulesRegex = /node_modules[\\/]saddlebag-/;
+const scopedBackpackModulesRegex = /node_modules[\\/]@skyscanner[\\/]bpk-/;
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -414,6 +415,7 @@ module.exports = function(webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
@@ -512,7 +514,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -534,7 +536,7 @@ module.exports = function(webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [cssRegex, backpackModulesRegex, scopedBackpackModulesRegex],
                 },
               ],
               use: getStyleLoaders({
@@ -550,7 +552,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
@@ -578,7 +580,7 @@ module.exports = function(webpackEnv) {
                   and: [sassRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [sassRegex, backpackModulesRegex],
+                  and: [sassRegex, backpackModulesRegex, scopedBackpackModulesRegex],
                 },
               ],
               use: getStyleLoaders(
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index c8e9cafacd..46a2edbed0 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -15,6 +15,7 @@ const pkgJson = require(paths.appPackageJson);
 const bpkReactScriptsConfig = pkgJson['backpack-react-scripts'] || {};
 
 const includePrefixes = bpkReactScriptsConfig.babelIncludePrefixes || [];
+includePrefixes.unshift('@skyscanner/bpk-');
 includePrefixes.unshift('bpk-');
 includePrefixes.unshift('saddlebag-');
 

From c084cf6ab02f8162dbcf4e9ab362278b25e4c877 Mon Sep 17 00:00:00 2001
From: Oliver Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Tue, 15 Jun 2021 09:49:31 +0100
Subject: [PATCH 25/25] Version updates

---
 packages/react-scripts/CHANGELOG.md | 2 +-
 packages/react-scripts/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index 453b560f2a..ac89693b53 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,6 +1,6 @@
 # `backpack-react-scripts` Change Log
 
-## 8.1.0 (Pending)
+## 7.1.0 (Pending)
 
 - BACKPORT: Added support for Backpack Foundations.
 - Added support for loadable components.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 594df7d2a2..9dceb3f650 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backpack-react-scripts",
-  "version": "7.1.0-alpha.d510ff8a",
+  "version": "7.1.0-alpha.f4cb8c3",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": "Skyscanner/backpack-react-scripts",
   "license": "MIT",