[SEARCHEXP-1358]Handle relative path and resolve to their real path

packages/react-scripts/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

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.

packages/react-scripts/backpack-addons/README.md

@@ -4,7 +4,7 @@ Our react scripts fork includes a number of custom configuration items in order
 
 | 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-]** |
+| **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 |

packages/react-scripts/backpack-addons/babelIncludePrefixes.js

@@ -1,12 +1,18 @@
 "use strict";
 
 const paths = require("../config/paths");
+const path = require('path');
 const appPackageJson = require(paths.appPackageJson);
 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 && /^(\.|\/)/.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

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',
+    ]);
+  });
+});

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"]
+  }
+}