From f56ebbaf700ce42e92bc5eadfe834e7e44747870 Mon Sep 17 00:00:00 2001
From: Oliver Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Mon, 14 Jun 2021 16:33:44 +0100
Subject: [PATCH 1/6] [NO JIRA]: Backport updates

---
 packages/react-scripts/CHANGELOG.md            |  7 ++++++-
 packages/react-scripts/README.md               |  2 +-
 .../react-scripts/config/webpack.config.js     | 18 ++++++++++++++----
 .../react-scripts/config/webpack.config.ssr.js | 18 ++++++++++++++----
 packages/react-scripts/package.json            |  2 +-
 .../scripts/utils/createJestConfig.js          |  1 +
 6 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index d7a1944f7e9..6f627935828 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,5 +1,9 @@
 # `backpack-react-scripts` Change Log
 
+## 8.0.6
+
+- BACKPORT: Updated webpack paths to include the new `@skyscanner/bpk` foundations packages.
+
 ## 8.0.4
 
 - Updated `bpk-mixins` to latest version `20.1.5`
@@ -11,7 +15,8 @@
 - Downgraded `sass-loader` to `7.3.1` due to issues with `node-sass` and functional changes to options.
 
 Rebased onto `upstream/master` v3.4.4 (6c009edface3ed63d0c7046f088c675a63c82fdb)
-  - Update `resolve-url-loader` to `3.1.2` to resolve security vunerability
+
+- Update `resolve-url-loader` to `3.1.2` to resolve security vunerability
 
 ## 8.0.2
 
diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md
index 4b2500f109b..ec9f0a85beb 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-", "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 c5bd3f16650..77bf5aa5f84 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -76,6 +76,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.
@@ -440,6 +441,7 @@ module.exports = function(webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
@@ -539,7 +541,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -561,7 +563,11 @@ module.exports = function(webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [
+                    cssRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders({
@@ -578,7 +584,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
@@ -606,7 +612,11 @@ 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 a99e2aedff3..8f41cb06bd8 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.
@@ -417,6 +418,7 @@ module.exports = function(webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
@@ -516,7 +518,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -538,7 +540,11 @@ module.exports = function(webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [
+                    cssRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders({
@@ -555,7 +561,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
@@ -583,7 +589,11 @@ module.exports = function(webpackEnv) {
                   and: [sassRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [sassRegex, backpackModulesRegex],
+                  and: [
+                    sassRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders(
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 74ad521020a..316b0ef9a46 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "8.0.4",
+  "version": "8.0.6",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index 49f9c57ef3b..ff3935488d6 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -16,6 +16,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 f6b5d72c49f50dfc509e7fd71bfb0dec915f99a3 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Wed, 10 Jun 2020 12:26:26 +0100
Subject: [PATCH 2/6] [BPK-2599]: Backpackify

---
 packages/react-scripts/package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 316b0ef9a46..012f24ae4f6 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -33,7 +33,11 @@
     "babel-loader": "8.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
     "babel-preset-react-app": "^9.1.2",
+<<<<<<< HEAD
     "bpk-mixins": "^20.1.5",
+=======
+    "bpk-mixins": "^19.1.20",
+>>>>>>> 1904fcb0 ([BPK-2599]: Backpackify)
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "css-loader": "3.4.2",

From b650acb11fe58000f2d47e018b6289416859806d Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Tue, 25 Aug 2020 18:28:34 +0100
Subject: [PATCH 3/6] [no jira]: Full SSR, Hard Source plugin

---
 packages/react-scripts/CHANGELOG.md           | 11 +++
 packages/react-scripts/README.md              |  1 +
 packages/react-scripts/bin/react-scripts.js   |  9 +-
 .../react-scripts/config/environmentHash.js   | 15 ++++
 packages/react-scripts/config/paths.js        |  9 +-
 .../react-scripts/config/webpack.config.js    | 33 +++++++-
 .../config/webpack.config.ssr.js              | 83 +++++++++++++------
 packages/react-scripts/package.json           | 10 +--
 packages/react-scripts/scripts/build.js       | 14 ++--
 packages/react-scripts/scripts/init.js        |  1 +
 packages/react-scripts/scripts/start-ssr.js   | 62 ++++++++++++++
 packages/react-scripts/scripts/start.js       | 10 +++
 .../react-scripts/scripts/utils/statusFile.js | 31 +++++++
 13 files changed, 244 insertions(+), 45 deletions(-)
 create mode 100644 packages/react-scripts/config/environmentHash.js
 create mode 100644 packages/react-scripts/scripts/start-ssr.js
 create mode 100644 packages/react-scripts/scripts/utils/statusFile.js

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index 6f627935828..86396b7b11d 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,5 +1,16 @@
 # `backpack-react-scripts` Change Log
 
+## 8.1.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 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.
+- 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
+
 ## 8.0.6
 
 - BACKPORT: Updated webpack paths to include the new `@skyscanner/bpk` foundations packages.
diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md
index ec9f0a85beb..1ec6a1063bb 100644
--- a/packages/react-scripts/README.md
+++ b/packages/react-scripts/README.md
@@ -32,6 +32,7 @@ npm start
   - `cssModules`: Boolean, true by default.
   - `sriEnabled`: Sets if SRI is to be used during build to add integrity hash for files, see [docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md).
     - **Note** if this is enabled, `crossOriginLoading` value is overriden with `anonymous` in order for it to output with the integrity value.
+  - `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/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js
index 7e6e290251a..1b2d36d222f 100755
--- a/packages/react-scripts/bin/react-scripts.js
+++ b/packages/react-scripts/bin/react-scripts.js
@@ -19,12 +19,17 @@ 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) : [];
 
-if (['build', 'eject', 'start', 'test'].includes(script)) {
+if (['build', 'eject', 'start', 'start-ssr', 'test'].includes(script)) {
   const result = spawn.sync(
     'node',
     nodeArgs
diff --git a/packages/react-scripts/config/environmentHash.js b/packages/react-scripts/config/environmentHash.js
new file mode 100644
index 00000000000..2ff71f01c46
--- /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/paths.js b/packages/react-scripts/config/paths.js
index 3b4a304055b..9ab55e2d93a 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -60,7 +60,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'),
@@ -83,7 +84,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'),
@@ -119,7 +121,8 @@ if (
   module.exports = {
     dotenv: resolveOwn(`${templatePath}/.env`),
     appPath: resolveApp('.'),
-    appBuild: resolveOwn('../../build'),
+    appBuildWeb: resolveOwn('../../build/web'),
+    appBuildSsr: resolveOwn('../../build/ssr'),
     appPublic: resolveOwn(`${templatePath}/public`),
     appHtml: resolveOwn(`${templatePath}/public/index.html`),
     appIndexJs: resolveModule(resolveOwn, `${templatePath}/src/index`),
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 77bf5aa5f84..aa0d5adf215 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -40,6 +40,9 @@ const postcssNormalize = require('postcss-normalize');
 
 const appPackageJson = require(paths.appPackageJson);
 
+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');
 const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
@@ -51,6 +54,7 @@ const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
 const crossOriginLoading = bpkReactScriptsConfig.crossOriginLoading || false;
 const sriEnabled = bpkReactScriptsConfig.sriEnabled || 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';
@@ -58,6 +62,11 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // 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';
+const environmentHash = require('./environmentHash');
+
 // const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
 
 const imageInlineSizeLimit = parseInt(
@@ -196,7 +205,7 @@ module.exports = function(webpackEnv) {
     output: {
       crossOriginLoading: sriEnabled ? 'anonymous' : crossOriginLoading,
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : 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.
@@ -375,6 +384,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.
@@ -471,6 +481,7 @@ module.exports = function(webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
+                  require.resolve('@loadable/babel-plugin'),
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
@@ -656,6 +667,20 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin({ environmentHash }),
+      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(
         Object.assign(
@@ -722,7 +747,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
@@ -741,6 +769,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 an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 8f41cb06bd8..b6e0dad0e8b 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');
@@ -39,6 +39,9 @@ const postcssNormalize = require('postcss-normalize');
 
 const appPackageJson = require(paths.appPackageJson);
 
+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');
 const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
@@ -55,6 +58,11 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // 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';
+const environmentHash = require('./environmentHash');
+
 // const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
 
 const imageInlineSizeLimit = parseInt(
@@ -99,18 +107,21 @@ module.exports = function(webpackEnv) {
     preProcessorOptions = {}
   ) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-        // css is located in `static/css`, use '../../' to locate index.html folder
-        // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith('.')
-          ? { publicPath: '../../' }
-          : {},
-      },
+      //isEnvDevelopment && require.resolve('style-loader'),
+      // isEnvProduction && {
+      //   loader: MiniCssExtractPlugin.loader,
+      //   // css is located in `static/css`, use '../../' to locate index.html folder
+      //   // in production `paths.publicUrlOrPath` can be a relative path
+      //   options: paths.publicUrlOrPath.startsWith('.')
+      //     ? { publicPath: '../../' }
+      //     : {},
+      // },
       {
+        // Since v2.0.0 css-loader/locals was removed in favour of exportOnlyLocals option
+        // So adding the option here in replacement as per
+        // https://github.com/webpack-contrib/css-loader#exportonlylocals
         loader: require.resolve('css-loader'),
-        options: cssOptions,
+        options: { ...cssOptions, exportOnlyLocals: true },
       },
       {
         // Options for PostCSS as we reference these options twice
@@ -183,8 +194,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,
@@ -194,7 +205,7 @@ module.exports = function(webpackEnv) {
     ].filter(Boolean),
     output: {
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : 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.
@@ -204,12 +215,12 @@ module.exports = function(webpackEnv) {
       //   : isEnvDevelopment && 'static/js/bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
-      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].[contenthash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
+        : isEnvDevelopment && 'static/js/[name].[chunkhash:8].chunk.js',
       // webpack uses `publicPath` to determine where the app is being served from.
       // It requires a trailing slash, or the file assets will get an incorrect path.
       // We inferred the "public path" (such as / or /my-project) from homepage.
@@ -352,6 +363,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.
@@ -448,6 +460,7 @@ module.exports = function(webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
+                  require.resolve('@loadable/babel-plugin'),
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
@@ -633,6 +646,20 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin({ environmentHash }),
+      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(
       //   Object.assign(
@@ -699,9 +726,12 @@ 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(),
+      // 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
@@ -712,14 +742,15 @@ 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',
-        }),
+      // 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',
+      //     // ignoreOrder: true,
+      //   }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
       //   output file so that tools can pick it up without having to parse
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 012f24ae4f6..cc479db8ec2 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "8.0.6",
+  "version": "8.1.0-alpha",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",
@@ -26,6 +26,8 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.9.0",
+    "@loadable/babel-plugin": "^5.6.0",
+    "@loadable/webpack-plugin": "^5.5.0",
     "@svgr/webpack": "4.3.3",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
@@ -33,11 +35,7 @@
     "babel-loader": "8.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
     "babel-preset-react-app": "^9.1.2",
-<<<<<<< HEAD
     "bpk-mixins": "^20.1.5",
-=======
-    "bpk-mixins": "^19.1.20",
->>>>>>> 1904fcb0 ([BPK-2599]: Backpackify)
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "css-loader": "3.4.2",
@@ -45,6 +43,7 @@
     "dotenv-expand": "5.1.0",
     "file-loader": "4.3.0",
     "fs-extra": "^8.1.0",
+    "hard-source-webpack-plugin": "^0.13.1",
     "html-webpack-plugin": "4.0.0-beta.11",
     "identity-obj-proxy": "3.0.0",
     "jest": "24.9.0",
@@ -53,6 +52,7 @@
     "jest-watch-typeahead": "0.4.2",
     "lodash": "^4.17.20",
     "mini-css-extract-plugin": "0.9.0",
+    "mkdirp": "^1.0.3",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.6.4",
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index c6a88d37de9..f4784198ecd 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -75,12 +75,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
@@ -99,8 +99,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);
       }
@@ -129,7 +129,7 @@ checkBrowsers(paths.appPath, isInteractive)
       printFileSizesAfterBuild(
         stats,
         previousFileSizes,
-        paths.appBuild,
+        paths.appBuildWeb,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
         WARN_AFTER_CHUNK_GZIP_SIZE
       );
@@ -138,7 +138,7 @@ checkBrowsers(paths.appPath, isInteractive)
       const appPackage = require(paths.appPackageJson);
       const publicUrl = paths.publicUrlOrPath;
       const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      const buildFolder = path.relative(process.cwd(), paths.appBuildWeb);
       printHostingInstructions(
         appPackage,
         publicUrl,
@@ -253,7 +253,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,
   });
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 61e43132868..e718117371b 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/packages/react-scripts/scripts/init.js
@@ -175,6 +175,7 @@ module.exports = function(
   appPackage.scripts = Object.assign(
     {
       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 00000000000..03a3fa5188b
--- /dev/null
+++ b/packages/react-scripts/scripts/start-ssr.js
@@ -0,0 +1,62 @@
+// @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 { createCompiler } = require('react-dev-utils/WebpackDevServerUtils');
+const webpack = require('webpack');
+
+const configFactory = require('../config/webpack.config.ssr');
+const paths = require('../config/paths');
+
+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);
+statusFile.init(compiler, paths.appBuildSsr);
+
+compiler.watch(
+  {
+    ignored: ['node_modules'],
+  },
+  err => {
+    if (err) {
+      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 2568ab36db1..298dfa9865a 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -48,6 +48,8 @@ const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 
+const statusFile = require('./utils/statusFile');
+
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
@@ -120,6 +122,9 @@ checkBrowsers(paths.appPath, isInteractive)
       tscCompileOnError,
       webpack,
     });
+
+    statusFile.init(compiler, paths.appBuildWeb);
+
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(
@@ -132,6 +137,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 => {
diff --git a/packages/react-scripts/scripts/utils/statusFile.js b/packages/react-scripts/scripts/utils/statusFile.js
new file mode 100644
index 00000000000..f918867a246
--- /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 19470eea13b2d49e39f378e671f788e375825c87 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Fri, 11 Sep 2020 18:09:33 +0100
Subject: [PATCH 4/6] Updating start-ssr command to work with updated functions

---
 packages/react-scripts/scripts/start-ssr.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/react-scripts/scripts/start-ssr.js b/packages/react-scripts/scripts/start-ssr.js
index 03a3fa5188b..a7b72324321 100644
--- a/packages/react-scripts/scripts/start-ssr.js
+++ b/packages/react-scripts/scripts/start-ssr.js
@@ -44,7 +44,21 @@ const config = configFactory('development');
 const appName = require(paths.appPackageJson).name;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
-const compiler = createCompiler(webpack, config, appName, undefined, useYarn);
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+
+const createCompilerOpts = {
+  appName,
+  config,
+  devSocket: undefined,
+  urls: undefined,
+  useYarn,
+  useTypeScript,
+  tscCompileOnError,
+  webpack,
+};
+
+const compiler = createCompiler(createCompilerOpts);
 statusFile.init(compiler, paths.appBuildSsr);
 
 compiler.watch(

From 83024d4900a94d8038e01a3ecde478c2dac5da49 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Wed, 23 Sep 2020 10:56:41 +0100
Subject: [PATCH 5/6] 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 aa0d5adf215..9639d39e7ed 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -384,7 +384,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 b6e0dad0e8b..384546797aa 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -363,7 +363,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.

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

---
 .../react-scripts/config/webpack.config.js    | 19 ++++++++-------
 .../config/webpack.config.ssr.js              | 21 ++++++++--------
 packages/react-scripts/package.json           |  2 +-
 packages/react-scripts/scripts/start-ssr.js   | 24 +++++++++++++------
 4 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 9639d39e7ed..6aab668bc82 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -48,7 +48,7 @@ const camelCase = require('lodash/camelCase');
 const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
 const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
   ? bpkReactScriptsConfig.babelIncludePrefixes.map(
-      prefix => new RegExp(`node_modules[\\/]${prefix}`)
+      (prefix) => new RegExp(`node_modules[\\/]${prefix}`)
     )
   : [];
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
@@ -89,7 +89,7 @@ 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.
-module.exports = function(webpackEnv) {
+module.exports = function (webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
@@ -225,12 +225,13 @@ module.exports = function(webpackEnv) {
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
+        ? (info) =>
             path
               .relative(paths.appSrc, info.absoluteResourcePath)
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+          ((info) =>
+            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
       // Prevents conflicts when multiple webpack runtimes (from different apps)
       // are used on the same page.
       // jsonpFunction: `webpackJsonp${appPackageJson.name}`,
@@ -331,7 +332,7 @@ module.exports = function(webpackEnv) {
       // },
       runtimeChunk: bpkReactScriptsConfig.enableAutomaticChunking
         ? {
-            name: entrypoint => `runtime-${entrypoint.name}`,
+            name: (entrypoint) => `runtime-${entrypoint.name}`,
           }
         : false,
     },
@@ -351,8 +352,8 @@ module.exports = function(webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes('ts')),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -384,7 +385,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.
@@ -786,7 +787,7 @@ module.exports = function(webpackEnv) {
             return manifest;
           }, seed);
           const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
+            (fileName) => !fileName.endsWith('.map')
           );
 
           return {
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index 384546797aa..a9da02a7eac 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -47,7 +47,7 @@ const sassFunctions = require('bpk-mixins/sass-functions');
 const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
 const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
   ? bpkReactScriptsConfig.babelIncludePrefixes.map(
-      prefix => new RegExp(`node_modules[\\/]${prefix}`)
+      (prefix) => new RegExp(`node_modules[\\/]${prefix}`)
     )
   : [];
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
@@ -85,7 +85,7 @@ 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.
-module.exports = function(webpackEnv) {
+module.exports = function (webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
@@ -117,11 +117,11 @@ module.exports = function(webpackEnv) {
       //     : {},
       // },
       {
-        // Since v2.0.0 css-loader/locals was removed in favour of exportOnlyLocals option
+        // In v3.0.0 css-loader/locals was removed in favour of onlyLocals option
         // So adding the option here in replacement as per
-        // https://github.com/webpack-contrib/css-loader#exportonlylocals
+        // https://github.com/webpack-contrib/css-loader/tree/v3.4.2#onlylocals
         loader: require.resolve('css-loader'),
-        options: { ...cssOptions, exportOnlyLocals: true },
+        options: { ...cssOptions, onlyLocals: true },
       },
       {
         // Options for PostCSS as we reference these options twice
@@ -227,12 +227,13 @@ module.exports = function(webpackEnv) {
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
+        ? (info) =>
             path
               .relative(paths.appSrc, info.absoluteResourcePath)
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+          ((info) =>
+            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
     },
     optimization: {
       // minimize: isEnvProduction,
@@ -330,8 +331,8 @@ module.exports = function(webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes('ts')),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -363,7 +364,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/package.json b/packages/react-scripts/package.json
index cc479db8ec2..6e3acb7ca6d 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "8.1.0-alpha",
+  "version": "8.1.0-beta.0",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",
diff --git a/packages/react-scripts/scripts/start-ssr.js b/packages/react-scripts/scripts/start-ssr.js
index a7b72324321..1fa738febe7 100644
--- a/packages/react-scripts/scripts/start-ssr.js
+++ b/packages/react-scripts/scripts/start-ssr.js
@@ -15,7 +15,7 @@ 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 => {
+process.on('unhandledRejection', (err) => {
   throw err;
 });
 
@@ -32,26 +32,36 @@ verifyTypeScriptSetup();
 // @remove-on-eject-end
 
 const fs = require('fs');
-const { createCompiler } = require('react-dev-utils/WebpackDevServerUtils');
 const webpack = require('webpack');
-
-const configFactory = require('../config/webpack.config.ssr');
+const {
+  createCompiler,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
 const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config.ssr');
 
 const statusFile = require('./utils/statusFile');
 
 const config = configFactory('development');
 const appName = require(paths.appPackageJson).name;
 const useYarn = fs.existsSync(paths.yarnLockFile);
-
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+const HOST = process.env.HOST || '0.0.0.0';
+const port = parseInt(process.env.PORT, 10) || 3000;
+const urls = prepareUrls(
+  protocol,
+  HOST,
+  port,
+  paths.publicUrlOrPath.slice(0, -1)
+);
 
 const createCompilerOpts = {
   appName,
   config,
   devSocket: undefined,
-  urls: undefined,
+  urls,
   useYarn,
   useTypeScript,
   tscCompileOnError,
@@ -65,7 +75,7 @@ compiler.watch(
   {
     ignored: ['node_modules'],
   },
-  err => {
+  (err) => {
     if (err) {
       console.log(err.message || err);
       process.exit(1);