[NO JIRA]: Adding new paths for scoped Backpack packages (#97)

Skyscanner · Jun 29, 2021 · 07fd1c8 · 07fd1c8
1 parent 914c6be
commit 07fd1c8
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 46 deletions.
diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
@@ -1,5 +1,13 @@
 # `backpack-react-scripts` Change Log
 
+## 9.1.3
+
+- Fixed an issue where webpack paths in SSR were not being utilised.
+
+## 9.1.2
+
+- Updated webpack paths to include the new `@skyscanner/bpk` foundations packages.
+
 ## 9.1.1
 
 - Optimize the usage of `thread-loader` to fix `build:storybook` running failed

diff --git 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
@@ -117,6 +117,7 @@ const hasJsxRuntime = (() => {
 // 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.
@@ -482,12 +483,13 @@ module.exports = function (webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
               options: {
                 customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides',
+                  'babel-preset-react-app/webpack-overrides'
                 ),
                 presets: [
                   [
@@ -514,7 +516,7 @@ module.exports = function (webpackEnv) {
                     'babel-preset-react-app',
                     'react-dev-utils',
                     'react-scripts',
-                  ],
+                  ]
                 ),
                 // @remove-on-eject-end
                 plugins: [
@@ -551,6 +553,7 @@ module.exports = function (webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               use: [
@@ -568,7 +571,7 @@ module.exports = function (webpackEnv) {
                   loader: require.resolve('babel-loader'),
                   options: {
                     customize: require.resolve(
-                      'babel-preset-react-app/webpack-overrides',
+                      'babel-preset-react-app/webpack-overrides'
                     ),
                     presets: [
                       [
@@ -595,7 +598,7 @@ module.exports = function (webpackEnv) {
                         'babel-preset-react-app',
                         'react-dev-utils',
                         'react-scripts',
-                      ],
+                      ]
                     ),
                     // @remove-on-eject-end
                     plugins: [
@@ -662,7 +665,7 @@ module.exports = function (webpackEnv) {
                         'babel-preset-react-app',
                         'react-dev-utils',
                         'react-scripts',
-                      ],
+                      ]
                     ),
                     // @remove-on-eject-end
                     // Babel sourcemaps are needed for debugging into node_modules
@@ -684,7 +687,7 @@ module.exports = function (webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -708,7 +711,11 @@ module.exports = function (webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [
+                    cssRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders({
@@ -727,7 +734,7 @@ module.exports = function (webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
@@ -757,7 +764,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
@@ -113,6 +113,7 @@ const hasJsxRuntime = (() => {
 // 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.
@@ -484,6 +485,7 @@ module.exports = function (webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
@@ -532,9 +534,9 @@ module.exports = function (webpackEnv) {
                     },
                   ],
                   isEnvDevelopment &&
-                  shouldUseReactRefresh &&
-                  require.resolve('react-refresh/babel'),
-              ].filter(Boolean),
+                    shouldUseReactRefresh &&
+                    require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                 // It enables caching results in ./node_modules/.cache/babel-loader/
                 // directory for faster rebuilds.
@@ -553,6 +555,7 @@ module.exports = function (webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               use: [
@@ -613,9 +616,9 @@ module.exports = function (webpackEnv) {
                         },
                       ],
                       isEnvDevelopment &&
-                      shouldUseReactRefresh &&
-                      require.resolve('react-refresh/babel'),
-                  ].filter(Boolean),
+                        shouldUseReactRefresh &&
+                        require.resolve('react-refresh/babel'),
+                    ].filter(Boolean),
                     // This is a feature of `babel-loader` for webpack (not Babel itself).
                     // It enables caching results in ./node_modules/.cache/babel-loader/
                     // directory for faster rebuilds.
@@ -686,7 +689,7 @@ module.exports = function (webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -710,12 +713,16 @@ module.exports = function (webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [
+                    cssRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction 
+                sourceMap: isEnvProduction
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
                 modules: {
@@ -729,15 +736,15 @@ module.exports = function (webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
                 {
                   importLoaders: 3,
-                  sourceMap: isEnvProduction 
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
                 },
                 'sass-loader',
                 {
@@ -759,7 +766,11 @@ module.exports = function (webpackEnv) {
                   and: [sassRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [sassRegex, backpackModulesRegex],
+                  and: [
+                    sassRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders(
@@ -870,7 +881,7 @@ module.exports = function (webpackEnv) {
       new webpack.DefinePlugin(env.stringified),
       // This is necessary to emit hot updates (CSS and Fast Refresh):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-            // Experimental hot reloading for React .
+      // Experimental hot reloading for React .
       // https://github.com/facebook/react/tree/master/packages/react-refresh
       isEnvDevelopment &&
         shouldUseReactRefresh &&
@@ -982,24 +993,24 @@ module.exports = function (webpackEnv) {
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
-        // new ESLintPlugin({
-        //   // Plugin options
-        //   extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
-        //   formatter: require.resolve('react-dev-utils/eslintFormatter'),
-        //   eslintPath: require.resolve('eslint'),
-        //   context: paths.appSrc,
-        //   // ESLint class options
-        //   cwd: paths.appPath,
-        //   resolvePluginsRelativeTo: __dirname,
-        //   baseConfig: {
-        //     extends: [require.resolve('eslint-config-react-app/base')],
-        //     rules: {
-        //       ...(!hasJsxRuntime && {
-        //         'react/react-in-jsx-scope': 'error',
-        //       }),
-        //     },
-        //   },
-        // }),
+      // new ESLintPlugin({
+      //   // Plugin options
+      //   extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+      //   formatter: require.resolve('react-dev-utils/eslintFormatter'),
+      //   eslintPath: require.resolve('eslint'),
+      //   context: paths.appSrc,
+      //   // ESLint class options
+      //   cwd: paths.appPath,
+      //   resolvePluginsRelativeTo: __dirname,
+      //   baseConfig: {
+      //     extends: [require.resolve('eslint-config-react-app/base')],
+      //     rules: {
+      //       ...(!hasJsxRuntime && {
+      //         'react/react-in-jsx-scope': 'error',
+      //       }),
+      //     },
+      //   },
+      // }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell webpack to provide empty mocks for them so importing them works.

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "9.1.1",
+  "version": "9.1.3",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "babel-plugin-named-asset-import": "^0.3.7",
     "babel-preset-react-app": "^10.0.0",
     "bfj": "^7.0.2",
-    "bpk-mixins": "^20.1.7",
+    "bpk-mixins": "^21.0.0",
     "cache-loader": "^4.1.0",
     "camelcase": "^6.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",

diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -17,6 +17,7 @@ const bpkReactScriptsConfig = pkgJson['backpack-react-scripts'] || {};
 
 const includePrefixes = bpkReactScriptsConfig.babelIncludePrefixes || [];
 includePrefixes.unshift('bpk-');
+includePrefixes.unshift('@skyscanner/bpk-');
 includePrefixes.unshift('saddlebag-');
 
 const transformIgnorePattern = `[/\\\\]node_modules[/\\\\](?!${includePrefixes.join(
@@ -52,7 +53,9 @@ module.exports = (resolve, rootDir, isEjecting) => {
     testEnvironment: 'jsdom',
     testRunner: require.resolve('jest-circus/runner'),
     transform: {
-      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': resolve('config/jest/babelTransform.js'),
+      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': resolve(
+        'config/jest/babelTransform.js'
+      ),
       // '^.+\\.css$': resolve('config/jest/cssTransform.js'),
       // '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': resolve(
       '^(?!.*\\.(js|jsx|ts|tsx|json)$)': resolve(