From 07fd1c8019245dfd6f42be1dfc60083e5735d970 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Mon, 14 Jun 2021 15:19:38 +0100
Subject: [PATCH] [NO JIRA]: Adding new paths for scoped Backpack packages
(#97)
---
packages/react-scripts/CHANGELOG.md | 8 ++
packages/react-scripts/README.md | 2 +-
.../react-scripts/config/webpack.config.js | 29 ++++---
.../config/webpack.config.ssr.js | 77 +++++++++++--------
packages/react-scripts/package.json | 4 +-
.../scripts/utils/createJestConfig.js | 5 +-
6 files changed, 79 insertions(+), 46 deletions(-)
diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index aa9c31bfad..726535f3ba 100644
--- 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
index 0236deb060..477f21c22b 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 `` and `` 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 e759455f8c..623153ca3b 100644
--- 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
index 5c67a6ca6f..0704bf15d9 100644
--- 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
index 538895fde4..5a9ca453ad 100644
--- 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
index f20d314c9e..6f554265bf 100644
--- 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(