Webpack update

config/env.js

@@ -1,13 +1,17 @@
-const fs = require("fs")
-const path = require("path")
-const paths = require("./paths")
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
 
 // Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve("./paths")]
+delete require.cache[require.resolve('./paths')];
 
-const NODE_ENV = process.env.NODE_ENV
+const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
-  throw new Error("The NODE_ENV environment variable is required but was not specified.")
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
@@ -16,25 +20,25 @@ const dotenvFiles = [
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
-  NODE_ENV !== "test" && `${paths.dotenv}.local`,
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   paths.dotenv,
-].filter(Boolean)
+].filter(Boolean);
 
 // Load environment variables from .env* files. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach((dotenvFile) => {
+dotenvFiles.forEach(dotenvFile => {
   if (fs.existsSync(dotenvFile)) {
-    require("dotenv-expand")(
-      require("dotenv").config({
+    require('dotenv-expand')(
+      require('dotenv').config({
         path: dotenvFile,
       })
-    )
+    );
   }
-})
+});
 
 // We support resolving modules according to `NODE_PATH`.
 // This lets you use absolute paths in imports inside large monorepos:
@@ -45,29 +49,29 @@ dotenvFiles.forEach((dotenvFile) => {
 // Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd())
-process.env.NODE_PATH = (process.env.NODE_PATH || "")
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .split(path.delimiter)
-  .filter((folder) => folder && !path.isAbsolute(folder))
-  .map((folder) => path.resolve(appDirectory, folder))
-  .join(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in webpack configuration.
-const REACT_APP = /^REACT_APP_/i
+const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter((key) => REACT_APP.test(key))
+    .filter(key => REACT_APP.test(key))
     .reduce(
       (env, key) => {
-        env[key] = process.env[key]
-        return env
+        env[key] = process.env[key];
+        return env;
       },
       {
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || "development",
+        NODE_ENV: process.env.NODE_ENV || 'development',
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
@@ -82,21 +86,19 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
-        // react-refresh is not 100% stable at this time,
-        // which is why it's disabled by default.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
+        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
       }
-    )
+    );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
-    "process.env": Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key])
-      return env
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
     }, {}),
-  }
+  };
 
-  return { raw, stringified }
+  return { raw, stringified };
 }
 
-module.exports = getClientEnvironment
+module.exports = getClientEnvironment;

config/getHttpsConfig.js

@@ -1,56 +1,66 @@
-const fs = require("fs")
-const path = require("path")
-const crypto = require("crypto")
-const chalk = require("react-dev-utils/chalk")
-const paths = require("./paths")
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
 
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
 function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
-  let encrypted
+  let encrypted;
   try {
     // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from("test"))
+    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
   } catch (err) {
-    throw new Error(`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`)
+    throw new Error(
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+    );
   }
 
   try {
     // privateDecrypt will throw an error with an invalid key
-    crypto.privateDecrypt(key, encrypted)
+    crypto.privateDecrypt(key, encrypted);
   } catch (err) {
-    throw new Error(`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${err.message}`)
+    throw new Error(
+      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+        err.message
+      }`
+    );
   }
 }
 
 // Read file and throw an error if it doesn't exist
 function readEnvFile(file, type) {
   if (!fs.existsSync(file)) {
     throw new Error(
-      `You specified ${chalk.cyan(type)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
-    )
+      `You specified ${chalk.cyan(
+        type
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+    );
   }
-  return fs.readFileSync(file)
+  return fs.readFileSync(file);
 }
 
 // Get the https config
 // Return cert files if provided in env, otherwise just true or false
 function getHttpsConfig() {
-  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env
-  const isHttps = HTTPS === "true"
+  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+  const isHttps = HTTPS === 'true';
 
   if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
-    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE)
-    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE)
+    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
     const config = {
-      cert: readEnvFile(crtFile, "SSL_CRT_FILE"),
-      key: readEnvFile(keyFile, "SSL_KEY_FILE"),
-    }
+      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+    };
 
-    validateKeyAndCerts({ ...config, keyFile, crtFile })
-    return config
+    validateKeyAndCerts({ ...config, keyFile, crtFile });
+    return config;
   }
-  return isHttps
+  return isHttps;
 }
 
-module.exports = getHttpsConfig
+module.exports = getHttpsConfig;

config/jest/babelTransform.js

@@ -1,27 +1,29 @@
-const babelJest = require("babel-jest")
+'use strict';
+
+const babelJest = require('babel-jest').default;
 
 const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
-    return false
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
   }
 
   try {
-    require.resolve("react/jsx-runtime")
-    return true
+    require.resolve('react/jsx-runtime');
+    return true;
   } catch (e) {
-    return false
+    return false;
   }
-})()
+})();
 
 module.exports = babelJest.createTransformer({
   presets: [
     [
-      require.resolve("babel-preset-react-app"),
+      require.resolve('babel-preset-react-app'),
       {
-        runtime: hasJsxRuntime ? "automatic" : "classic",
+        runtime: hasJsxRuntime ? 'automatic' : 'classic',
       },
     ],
   ],
   babelrc: false,
   configFile: false,
-})
+});

config/jest/cssTransform.js

@@ -1,12 +1,14 @@
+'use strict';
+
 // This is a custom Jest transformer turning style imports into empty objects.
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
   process() {
-    return "module.exports = {};"
+    return 'module.exports = {};';
   },
   getCacheKey() {
     // The output is always the same.
-    return "cssTransform"
+    return 'cssTransform';
   },
-}
+};

config/jest/fileTransform.js

@@ -1,20 +1,22 @@
-const path = require("path")
-const camelcase = require("camelcase")
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
 
 // This is a custom Jest transformer turning file imports into filenames.
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
   process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename))
+    const assetFilename = JSON.stringify(path.basename(filename));
 
     if (filename.match(/\.svg$/)) {
       // Based on how SVGR generates a component name:
       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
       const pascalCaseFilename = camelcase(path.parse(filename).name, {
         pascalCase: true,
-      })
-      const componentName = `Svg${pascalCaseFilename}`
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
       return `const React = require('react');
       module.exports = {
         __esModule: true,
@@ -30,9 +32,9 @@ module.exports = {
             })
           };
         }),
-      };`
+      };`;
     }
 
-    return `module.exports = ${assetFilename};`
+    return `module.exports = ${assetFilename};`;
   },
-}
+};