From 7bddddfee17b6b1f67d1b7f28edafb49e73e1b4c Mon Sep 17 00:00:00 2001
From: "gc.zhu" <gc.zhu@skyscanner.net>
Date: Mon, 15 May 2023 11:25:48 +0800
Subject: [PATCH 1/7] handle relative path

---
 .../backpack-addons/babelIncludePrefixes.js   | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
index 315d34accf7..224fa966f57 100644
--- a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
+++ b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
@@ -1,12 +1,19 @@
-"use strict";
+'use strict';
 
-const paths = require("../config/paths");
+const paths = require('../config/paths');
+const path = require('path');
 const appPackageJson = require(paths.appPackageJson);
-const bpkReactScriptsConfig = appPackageJson["backpack-react-scripts"] || {};
+const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
 const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
-  ? bpkReactScriptsConfig.babelIncludePrefixes.map(
-      (prefix) => new RegExp(`node_modules[\\/]${prefix}`)
-    )
+  ? bpkReactScriptsConfig.babelIncludePrefixes.map(prefix => {
+      if (prefix && (prefix.startsWith('.') || prefix.startsWith('/'))) {
+        // if the prefixes starts with '.', '..' or '/', likes '../common'
+        // it means is the relative path which doesn't need to be in the node_modules folder
+        console.log(path.resolve(paths.appPath, prefix));
+        return path.resolve(paths.appPath, prefix);
+      }
+      return new RegExp(`node_modules[\\/]${prefix}`);
+    })
   : [];
 
 // Backpack / saddlebag node module regexes

From 61cad5151f6035e020f4fa28b7f8cddeb322630f Mon Sep 17 00:00:00 2001
From: "gc.zhu" <gc.zhu@skyscanner.net>
Date: Tue, 16 May 2023 12:01:30 +0800
Subject: [PATCH 2/7] remove console.log

---
 packages/react-scripts/backpack-addons/babelIncludePrefixes.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
index 224fa966f57..ade3eac8ad5 100644
--- a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
+++ b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
@@ -9,7 +9,6 @@ const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
       if (prefix && (prefix.startsWith('.') || prefix.startsWith('/'))) {
         // if the prefixes starts with '.', '..' or '/', likes '../common'
         // it means is the relative path which doesn't need to be in the node_modules folder
-        console.log(path.resolve(paths.appPath, prefix));
         return path.resolve(paths.appPath, prefix);
       }
       return new RegExp(`node_modules[\\/]${prefix}`);

From 6701d9d70a3d9f152a2c55b5def81195c6e9cb6e Mon Sep 17 00:00:00 2001
From: "gc.zhu" <gc.zhu@skyscanner.net>
Date: Tue, 6 Jun 2023 10:13:07 +0800
Subject: [PATCH 3/7] handle relative path

---
 packages/react-scripts/CHANGELOG.md           |  4 +++
 packages/react-scripts/README.md              |  2 +-
 .../react-scripts/backpack-addons/README.md   | 28 +++++++++----------
 .../backpack-addons/babelIncludePrefixes.js   |  6 ++--
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index e9f3da72fc4..6a8728f1163 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,5 +1,9 @@
 # `backpack-react-scripts` Change Log
 
+## 10.2.1
+
+- Identify relative path in `babelIncludePrefixes`
+
 ## 10.2.0
 
 - Disable `loadable` in CSR build
diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md
index 7a401e4a7a4..dbea2fae2ef 100644
--- a/packages/react-scripts/README.md
+++ b/packages/react-scripts/README.md
@@ -27,7 +27,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 `["@skyscanner/bpk-", "bpk-", "saddlebag-"]` by default.
+  - `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation, including local import module, e.g. `"../common"`. 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/backpack-addons/README.md b/packages/react-scripts/backpack-addons/README.md
index 5ffda5a5654..f1d6db32e0b 100644
--- a/packages/react-scripts/backpack-addons/README.md
+++ b/packages/react-scripts/backpack-addons/README.md
@@ -2,19 +2,19 @@ Our react scripts fork includes a number of custom configuration items in order
 
 ## Features Description
 
-| Feature | Description | Default Value |
-|:---|:--|:---|
-| **babelIncludePrefixes** | Array of module name prefixes to opt into babel compilation. <br> Default includes **@skyscanner/bpk-, bpk- and saddlebag-** packages by default to be compiled | **[@skyscanner/bpk-, bpk- and saddlebag-]** |
-| **sriEnabled** | Determines if Subresource Intergrity is used during build to add an integrity hash for files. <br> The SRI is a security feature to enable browsers to verify the files they fetch are unmodified. <br> If enabled crossOriginLoading value is overriden with anonymous to allow output to have integrity value <br> See [webpack subresource integrity docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md) | **false** (this is currently the default in the future security may want to make it true by default but pending them still trying things about) |
-| **crossOriginLoading** | Option to enable cross origin loading of chunks to modify the default webpack behaviour of being false. <br> Docs: https://webpack.js.org/configuration/output/#outputcrossoriginloading | **false** |
-| **ignoreCssWarnings** | Provides the ablity to supress CSS ordering warnings when its safe and ordering is not of a concern on the output <br> See [mini css extract plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings) | **false** - by default we should care about order as it can sometimes have an output impact |
-| **cssModules** | Determines if cssModules are being used. <br> If enabled supports css modules and configures css-loader for use <br> If not enabled supports sass modules in the project and configures sass-loader for use | **true** |
-| **amdExludes** | Array of module names to be excluded from AMD ([Asynchronous Module Definition](https://webpack.js.org/api/module-methods/#amd)) parsing.<br> lodash included by defeault. | **['lodash']** |
-| **externals** | Provides a way of excluding dependencies from the bundles and instead relies on them being available at runtime on the clients environment E.g. React libraries.<br> See https://webpack.js.org/configuration/externals/ | **{}** |
-| **ssrExternals** | The same as above `externals` except used for server side rendering only in **ssr.js** | **{}** |
-| **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching. | **false** |
-| **vendorsChunkRegex** | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details. |  |
-| **sassFunctions** | This function encodes svg content into `base64` when there is a `bpk-icon` in the.scss file. |  |
+| Feature                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default Value                                                                                                                                   |
+| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
+| **babelIncludePrefixes**    | Array of module name prefixes to opt into babel compilation, including local import module, e.g. `"../common"`. <br> Default includes **@skyscanner/bpk-, bpk- and saddlebag-** packages by default to be compiled                                                                                                                                                                                                                            | **[@skyscanner/bpk-, bpk- and saddlebag-]**                                                                                                     |
+| **sriEnabled**              | Determines if Subresource Intergrity is used during build to add an integrity hash for files. <br> The SRI is a security feature to enable browsers to verify the files they fetch are unmodified. <br> If enabled crossOriginLoading value is overriden with anonymous to allow output to have integrity value <br> See [webpack subresource integrity docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md) | **false** (this is currently the default in the future security may want to make it true by default but pending them still trying things about) |
+| **crossOriginLoading**      | Option to enable cross origin loading of chunks to modify the default webpack behaviour of being false. <br> Docs: https://webpack.js.org/configuration/output/#outputcrossoriginloading                                                                                                                                                                                                                                                      | **false**                                                                                                                                       |
+| **ignoreCssWarnings**       | Provides the ablity to supress CSS ordering warnings when its safe and ordering is not of a concern on the output <br> See [mini css extract plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings)                                                                                                                                                                                                   | **false** - by default we should care about order as it can sometimes have an output impact                                                     |
+| **cssModules**              | Determines if cssModules are being used. <br> If enabled supports css modules and configures css-loader for use <br> If not enabled supports sass modules in the project and configures sass-loader for use                                                                                                                                                                                                                                   | **true**                                                                                                                                        |
+| **amdExludes**              | Array of module names to be excluded from AMD ([Asynchronous Module Definition](https://webpack.js.org/api/module-methods/#amd)) parsing.<br> lodash included by defeault.                                                                                                                                                                                                                                                                    | **['lodash']**                                                                                                                                  |
+| **externals**               | Provides a way of excluding dependencies from the bundles and instead relies on them being available at runtime on the clients environment E.g. React libraries.<br> See https://webpack.js.org/configuration/externals/                                                                                                                                                                                                                      | **{}**                                                                                                                                          |
+| **ssrExternals**            | The same as above `externals` except used for server side rendering only in **ssr.js**                                                                                                                                                                                                                                                                                                                                                        | **{}**                                                                                                                                          |
+| **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching.                                                                                 | **false**                                                                                                                                       |
+| **vendorsChunkRegex**       | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details.                                                                                                                                                                                                               |                                                                                                                                                 |
+| **sassFunctions**           | This function encodes svg content into `base64` when there is a `bpk-icon` in the.scss file.                                                                                                                                                                                                                                                                                                                                                  |                                                                                                                                                 |
 
 ## How to add new feature
 
@@ -22,7 +22,7 @@ Our react scripts fork includes a number of custom configuration items in order
 - Require features in the file(for example, webpack.config.js) where they are needed.
   - For each line of code that is changed, make sure to add a comment `// #backpack-addon {{featureName}}`
   - Try to keep the lines of code changed outside of the backpack-addons folder to a minimum
-`require(...../backpack-addons/...)` files instead of writing it inline as much as possible.
+    `require(...../backpack-addons/...)` files instead of writing it inline as much as possible.
 - Add a description of the new feature in the table above the current document.
 
 ## How to upgrade from the upstream `facebook/create-react-app` repo
diff --git a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
index ade3eac8ad5..b2dcf85693f 100644
--- a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
+++ b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
@@ -6,9 +6,9 @@ const appPackageJson = require(paths.appPackageJson);
 const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
 const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
   ? bpkReactScriptsConfig.babelIncludePrefixes.map(prefix => {
-      if (prefix && (prefix.startsWith('.') || prefix.startsWith('/'))) {
-        // if the prefixes starts with '.', '..' or '/', likes '../common'
-        // it means is the relative path which doesn't need to be in the node_modules folder
+      if (prefix && /^(\.|\/)/.test(prefix)) {
+        // if the prefixes starts with '.' or '/', e.g. '../common' './common' '/common'
+        // That means it is a relative path which doesn't need to be in the node_modules folder
         return path.resolve(paths.appPath, prefix);
       }
       return new RegExp(`node_modules[\\/]${prefix}`);

From d5c10b7d488e2e4c9c1558a80214ce416682e3e3 Mon Sep 17 00:00:00 2001
From: "gc.zhu" <gc.zhu@skyscanner.net>
Date: Tue, 6 Jun 2023 11:00:56 +0800
Subject: [PATCH 4/7] unformat

---
 .../react-scripts/backpack-addons/README.md   | 28 +++++++++----------
 .../backpack-addons/babelIncludePrefixes.js   | 20 ++++++-------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/react-scripts/backpack-addons/README.md b/packages/react-scripts/backpack-addons/README.md
index f1d6db32e0b..f5c4431c08b 100644
--- a/packages/react-scripts/backpack-addons/README.md
+++ b/packages/react-scripts/backpack-addons/README.md
@@ -2,19 +2,19 @@ Our react scripts fork includes a number of custom configuration items in order
 
 ## Features Description
 
-| Feature                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default Value                                                                                                                                   |
-| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
-| **babelIncludePrefixes**    | Array of module name prefixes to opt into babel compilation, including local import module, e.g. `"../common"`. <br> Default includes **@skyscanner/bpk-, bpk- and saddlebag-** packages by default to be compiled                                                                                                                                                                                                                            | **[@skyscanner/bpk-, bpk- and saddlebag-]**                                                                                                     |
-| **sriEnabled**              | Determines if Subresource Intergrity is used during build to add an integrity hash for files. <br> The SRI is a security feature to enable browsers to verify the files they fetch are unmodified. <br> If enabled crossOriginLoading value is overriden with anonymous to allow output to have integrity value <br> See [webpack subresource integrity docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md) | **false** (this is currently the default in the future security may want to make it true by default but pending them still trying things about) |
-| **crossOriginLoading**      | Option to enable cross origin loading of chunks to modify the default webpack behaviour of being false. <br> Docs: https://webpack.js.org/configuration/output/#outputcrossoriginloading                                                                                                                                                                                                                                                      | **false**                                                                                                                                       |
-| **ignoreCssWarnings**       | Provides the ablity to supress CSS ordering warnings when its safe and ordering is not of a concern on the output <br> See [mini css extract plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings)                                                                                                                                                                                                   | **false** - by default we should care about order as it can sometimes have an output impact                                                     |
-| **cssModules**              | Determines if cssModules are being used. <br> If enabled supports css modules and configures css-loader for use <br> If not enabled supports sass modules in the project and configures sass-loader for use                                                                                                                                                                                                                                   | **true**                                                                                                                                        |
-| **amdExludes**              | Array of module names to be excluded from AMD ([Asynchronous Module Definition](https://webpack.js.org/api/module-methods/#amd)) parsing.<br> lodash included by defeault.                                                                                                                                                                                                                                                                    | **['lodash']**                                                                                                                                  |
-| **externals**               | Provides a way of excluding dependencies from the bundles and instead relies on them being available at runtime on the clients environment E.g. React libraries.<br> See https://webpack.js.org/configuration/externals/                                                                                                                                                                                                                      | **{}**                                                                                                                                          |
-| **ssrExternals**            | The same as above `externals` except used for server side rendering only in **ssr.js**                                                                                                                                                                                                                                                                                                                                                        | **{}**                                                                                                                                          |
-| **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching.                                                                                 | **false**                                                                                                                                       |
-| **vendorsChunkRegex**       | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details.                                                                                                                                                                                                               |                                                                                                                                                 |
-| **sassFunctions**           | This function encodes svg content into `base64` when there is a `bpk-icon` in the.scss file.                                                                                                                                                                                                                                                                                                                                                  |                                                                                                                                                 |
+| Feature | Description | Default Value |
+|:---|:--|:---|
+| **babelIncludePrefixes** | Array of module name prefixes to opt into babel compilation, including local import module, e.g. `"../common"`. <br> Default includes **@skyscanner/bpk-, bpk- and saddlebag-** packages by default to be compiled | **[@skyscanner/bpk-, bpk- and saddlebag-]** |
+| **sriEnabled** | Determines if Subresource Intergrity is used during build to add an integrity hash for files. <br> The SRI is a security feature to enable browsers to verify the files they fetch are unmodified. <br> If enabled crossOriginLoading value is overriden with anonymous to allow output to have integrity value <br> See [webpack subresource integrity docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md) | **false** (this is currently the default in the future security may want to make it true by default but pending them still trying things about) |
+| **crossOriginLoading** | Option to enable cross origin loading of chunks to modify the default webpack behaviour of being false. <br> Docs: https://webpack.js.org/configuration/output/#outputcrossoriginloading | **false** |
+| **ignoreCssWarnings** | Provides the ablity to supress CSS ordering warnings when its safe and ordering is not of a concern on the output <br> See [mini css extract plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings) | **false** - by default we should care about order as it can sometimes have an output impact |
+| **cssModules** | Determines if cssModules are being used. <br> If enabled supports css modules and configures css-loader for use <br> If not enabled supports sass modules in the project and configures sass-loader for use | **true** |
+| **amdExludes** | Array of module names to be excluded from AMD ([Asynchronous Module Definition](https://webpack.js.org/api/module-methods/#amd)) parsing.<br> lodash included by defeault. | **['lodash']** |
+| **externals** | Provides a way of excluding dependencies from the bundles and instead relies on them being available at runtime on the clients environment E.g. React libraries.<br> See https://webpack.js.org/configuration/externals/ | **{}** |
+| **ssrExternals** | The same as above `externals` except used for server side rendering only in **ssr.js** | **{}** |
+| **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching. | **false** |
+| **vendorsChunkRegex** | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details. |  |
+| **sassFunctions** | This function encodes svg content into `base64` when there is a `bpk-icon` in the.scss file. |  |
 
 ## How to add new feature
 
@@ -22,7 +22,7 @@ Our react scripts fork includes a number of custom configuration items in order
 - Require features in the file(for example, webpack.config.js) where they are needed.
   - For each line of code that is changed, make sure to add a comment `// #backpack-addon {{featureName}}`
   - Try to keep the lines of code changed outside of the backpack-addons folder to a minimum
-    `require(...../backpack-addons/...)` files instead of writing it inline as much as possible.
+`require(...../backpack-addons/...)` files instead of writing it inline as much as possible.
 - Add a description of the new feature in the table above the current document.
 
 ## How to upgrade from the upstream `facebook/create-react-app` repo
diff --git a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
index b2dcf85693f..5d6eebddac7 100644
--- a/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
+++ b/packages/react-scripts/backpack-addons/babelIncludePrefixes.js
@@ -1,18 +1,18 @@
-'use strict';
+"use strict";
 
-const paths = require('../config/paths');
+const paths = require("../config/paths");
 const path = require('path');
 const appPackageJson = require(paths.appPackageJson);
-const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
+const bpkReactScriptsConfig = appPackageJson["backpack-react-scripts"] || {};
 const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
   ? bpkReactScriptsConfig.babelIncludePrefixes.map(prefix => {
-      if (prefix && /^(\.|\/)/.test(prefix)) {
-        // if the prefixes starts with '.' or '/', e.g. '../common' './common' '/common'
-        // That means it is a relative path which doesn't need to be in the node_modules folder
-        return path.resolve(paths.appPath, prefix);
-      }
-      return new RegExp(`node_modules[\\/]${prefix}`);
-    })
+    if (prefix && /^(\.|\/)/.test(prefix)) {
+      // if the prefixes starts with '.' or '/', e.g. '../common' './common' '/common'
+      // That means it is a relative path which doesn't need to be in the node_modules folder
+      return path.resolve(paths.appPath, prefix);
+    }
+    return new RegExp(`node_modules[\\/]${prefix}`);
+  })
   : [];
 
 // Backpack / saddlebag node module regexes

From 8e2809fe37f469e286ed0453f72fa68aa89de606 Mon Sep 17 00:00:00 2001
From: "gc.zhu" <gc.zhu@skyscanner.net>
Date: Tue, 6 Jun 2023 16:27:39 +0800
Subject: [PATCH 5/7] update version

---
 packages/react-scripts/CHANGELOG.md | 2 +-
 packages/react-scripts/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index 6a8728f1163..44cd6f501f2 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,6 +1,6 @@
 # `backpack-react-scripts` Change Log
 
-## 10.2.1
+## 10.4.1
 
 - Identify relative path in `babelIncludePrefixes`
 
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 8b8451cf7bc..d5af81b3b24 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "10.4.0",
+  "version": "10.4.1",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",

From 8203ec3e6dbd5dd96a85ab6849c20b4774fd0d9f Mon Sep 17 00:00:00 2001
From: "gc.zhu" <gc.zhu@skyscanner.net>
Date: Wed, 14 Jun 2023 12:48:30 +0800
Subject: [PATCH 6/7] add unit test

---
 packages/react-scripts/.eslintrc.json         |  5 ++++
 .../babelIncludePrefixes.test.js              | 26 +++++++++++++++++++
 .../backpack-addons/test/mockPackage.json     |  7 +++++
 packages/react-scripts/package.json           |  2 +-
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-scripts/.eslintrc.json
 create mode 100644 packages/react-scripts/backpack-addons/babelIncludePrefixes.test.js
 create mode 100644 packages/react-scripts/backpack-addons/test/mockPackage.json

diff --git a/packages/react-scripts/.eslintrc.json b/packages/react-scripts/.eslintrc.json
new file mode 100644
index 00000000000..55f121d152d
--- /dev/null
+++ b/packages/react-scripts/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}
diff --git a/packages/react-scripts/backpack-addons/babelIncludePrefixes.test.js b/packages/react-scripts/backpack-addons/babelIncludePrefixes.test.js
new file mode 100644
index 00000000000..370d937132a
--- /dev/null
+++ b/packages/react-scripts/backpack-addons/babelIncludePrefixes.test.js
@@ -0,0 +1,26 @@
+'use strict';
+const getBabelIncludePrefixes = require('../backpack-addons/babelIncludePrefixes');
+
+jest.mock('../config/paths', () => ({
+  appSrc: '/Users/xxx/backpack-react-scripts/client/src',
+  appPackageJson: './test/mockPackage.json',
+  appPath: '/Users/xxx/backpack-react-scripts/client',
+}));
+
+describe('babelIncludePrefixes', () => {
+  test('should handler babelIncludePrefixes correctly', () => {
+    const babelIncludePrefixes = getBabelIncludePrefixes();
+
+    expect(babelIncludePrefixes).toEqual([
+      '/Users/xxx/backpack-react-scripts/client/src',
+      /node_modules[\\/]bpk-/,
+      /node_modules[\\/]saddlebag-/,
+      /node_modules[\\/]@skyscanner[\\/]bpk-/,
+      /node_modules[\\/]@skyscanner[\\/]backpack-web/,
+      new RegExp('node_modules[\\/]@skyscanner'),
+      '/Users/xxx/backpack-react-scripts/client/common',
+      '/Users/xxx/backpack-react-scripts/common',
+      '/server',
+    ]);
+  });
+});
diff --git a/packages/react-scripts/backpack-addons/test/mockPackage.json b/packages/react-scripts/backpack-addons/test/mockPackage.json
new file mode 100644
index 00000000000..ac7e660a085
--- /dev/null
+++ b/packages/react-scripts/backpack-addons/test/mockPackage.json
@@ -0,0 +1,7 @@
+{
+  "name": "test",
+  "version": "1.0.0",
+  "backpack-react-scripts": {
+    "babelIncludePrefixes": ["@skyscanner", "./common", "../common", "/server"]
+  }
+}
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index d5af81b3b24..8b8451cf7bc 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "10.4.1",
+  "version": "10.4.0",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",

From 92c59e44d05b56e64ada350ce15a7d358ba4ec46 Mon Sep 17 00:00:00 2001
From: "gc.zhu" <gc.zhu@skyscanner.net>
Date: Wed, 14 Jun 2023 12:50:41 +0800
Subject: [PATCH 7/7] revert change log

---
 packages/react-scripts/CHANGELOG.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index 44cd6f501f2..e9f3da72fc4 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/packages/react-scripts/CHANGELOG.md
@@ -1,9 +1,5 @@
 # `backpack-react-scripts` Change Log
 
-## 10.4.1
-
-- Identify relative path in `babelIncludePrefixes`
-
 ## 10.2.0
 
 - Disable `loadable` in CSR build