[App Extensibility ⚙️] Fix Babel configuration ignore node_modules folder (@W-17373534@) (#2228)

* Babel ignore node_modules files

* Revert "[App Extensibility ⚙️] Fix Slow Dev Server (@W-17131556@) (#2115)"

This reverts commit 712f744

* WIP Add debug logs

* WIP babel-config only

This reverts commit 712f744

* WIP restore pwa-kit-dev start command

* WIP babel-config ignore

* Clean up

* Fix Babel config

* Clean up

* lint

* Remove Babel ignore flag

* PR Feedback

* Clean up testing code

* Re-add tests

Author: adamraya

packages/commerce-sdk-react/package-lock.json

@@ -57,5 +57,21 @@ export default {
             presets: [require('@babel/preset-env'), require('@babel/preset-react')],
             plugins: [require('babel-plugin-dynamic-import-node-babel-7')]
         }
-    }
+    },
+    ignore: [
+        function (filepath) {
+            // Return false if it's an allowed extension package @salesforce/pwa-kit-extension-sdk and extension-*
+            if (/node_modules\/@[^/]+\/(pwa-kit-extension-sdk|extension-)/.test(filepath)) {
+                return false
+            }
+
+            // Return true if it's in node_modules (excluding allowed packages handled above)
+            if (/node_modules/.test(filepath)) {
+                return true
+            }
+
+            // Return false for all other files
+            return false
+        }
+    ]
 }

packages/pwa-kit-dev/src/configs/babel/babel-config.js

@@ -340,6 +340,8 @@ const ruleForBabelLoader = (babelPlugins) => {
         id: 'babel-loader',
         test: /(\.js(x?)|\.ts(x?))$/,
         // NOTE: Because our extensions are just folders containing source code, we need to ensure that the babel-loader processes them.
+        // This regex exclude everything in node_modules, but node_modules/extensions-*/ folders
+        exclude: /node_modules\/(?!(@?[^/]+\/)?extension-)[^/]+\/.*$/i,
         use: [
             {
                 loader: findDepInStack('babel-loader'),

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -11,10 +11,6 @@ import {getConfiguredExtensions} from '../../shared/utils'
 /**
  * Constants used for building Babel extensibility arguments:
  *
- * IGNORE_PATH: Provides a placeholder path that does not exist, used in Babel's `--ignore`
- * option to prevent processing of any unintended files by specifying a path that cannot match
- * any actual file. This effectively disables Babel's ignore behavior when no other paths are specified.
- *
  * SERVER_PATH: Absolute path to the server entry point (`build-remote-server.js`) within the
  * `@salesforce/pwa-kit-runtime` package. Required for Babel processing to ensure that server-side
  * code, especially for SSR, is correctly transpiled as part of the extensibility setup.
@@ -25,7 +21,6 @@ import {getConfiguredExtensions} from '../../shared/utils'
  * if no actual extensions are added.
  */
 const NODE_MODULES_PATH = 'node_modules'
-const IGNORE_PATH = `${NODE_MODULES_PATH}/does_not_exist`
 const SERVER_PATH = `${NODE_MODULES_PATH}/@salesforce/pwa-kit-runtime/ssr/server/build-remote-server.js`
 const PLACEHOLDER_PATH = `${NODE_MODULES_PATH}/@salesforce/pwa-kit-extension-sdk/express/placeholders/application-extensions.js`
 
@@ -42,12 +37,15 @@ export const buildBabelExtensibilityArgs = (config: any) => {
 
     const extensionSrcPaths =
         extensions.length > 0
-            ? extensions.map(([packageName]) =>
-                  fse.realpathSync(p.resolve(`${NODE_MODULES_PATH}/${packageName}/src`))
+            ? extensions.map(
+                  ([packageName]) =>
+                      fse.realpathSync(p.resolve(`${NODE_MODULES_PATH}/${packageName}/src`)) + '/**'
               )
             : []
 
     const extensionsPathsStr = extensionSrcPaths.length > 0 ? `,${extensionSrcPaths.join(',')}` : ''
 
-    return `--ignore "${IGNORE_PATH}" --only "app/**,${serverPath},${placeHolderPath}${extensionsPathsStr}/**"`
+    const babelArgs = `--only "app/**,${serverPath},${placeHolderPath}${extensionsPathsStr}"`
+
+    return babelArgs
 }

packages/pwa-kit-extension-sdk/package-lock.json

@@ -6,8 +6,8 @@
  */
 import * as fse from 'fs-extra'
 import * as path from 'path'
-import {buildBabelExtensibilityArgs} from './utils'
-import {ApplicationExtensionEntryTuple} from '../../types'
+import {buildBabelExtensibilityArgs} from './babel/utils'
+import {ApplicationExtensionEntryTuple} from '../types'
 
 jest.mock('fs-extra', () => ({
     ...jest.requireActual('fs-extra'),
@@ -50,7 +50,7 @@ describe('buildBabelExtensibilityArgs', () => {
     })
 
     test('should return the correct Babel arguments string', () => {
-        const expectedArgs = `--ignore "node_modules/does_not_exist" --only "app/**,/absolute/path/to/build-remote-server.js,/absolute/path/to/application-extensions.js,/absolute/path/to/@salesforce/extension-this/src,/absolute/path/to/@salesforce/extension-that/src/**"`
+        const expectedArgs = `--only "app/**,/absolute/path/to/build-remote-server.js,/absolute/path/to/application-extensions.js,/absolute/path/to/@salesforce/extension-this/src/**,/absolute/path/to/@salesforce/extension-that/src/**"`
         const result = buildBabelExtensibilityArgs(CONFIG)
         expect(result).toBe(expectedArgs)
     })
@@ -78,7 +78,7 @@ describe('buildBabelExtensibilityArgs', () => {
     })
 
     test('should handle an empty list of configured extensions', () => {
-        const expectedArgs = `--ignore "node_modules/does_not_exist" --only "app/**,/absolute/path/to/build-remote-server.js,/absolute/path/to/application-extensions.js/**"`
+        const expectedArgs = `--only "app/**,/absolute/path/to/build-remote-server.js,/absolute/path/to/application-extensions.js"`
         const result = buildBabelExtensibilityArgs({app: {extensions: []}})
         expect(result).toBe(expectedArgs)
         const result2 = buildBabelExtensibilityArgs({app: {}})