Revert - Adding colors to noParse

Author: olliecurtis

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 {

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.

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",

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);