[App Extensibility ⚙️] Fix Babel configuration ignore `node_modules` folder adjusted for Windows (@W-17373534@) by adamraya · Pull Request #2230 · SalesforceCommerceCloud/pwa-kit

adamraya · 2025-01-30T21:44:53Z

Description

Follow up on PR #2228 by adjusting the Babel changes to ensure compatibility with Windows.

Adjusted Babel config to support Windows using backslashes \ and Unix-like systems using forward slashes / as path separators.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

Adjusted Babel config to support Windows and Unix-like systems.

How to Test-Drive This PR

Checkout this branch W-17373534-ignore-node_modules-windows on a Windows machine and run npm ci.
Run the generator with this configuration:

node .\packages\pwa-kit-create-app\scripts\create-mobify-app-dev.js

? What type of PWA Kit project would you like to create? PWA Kit Application
? Do you want to use Application Extensibility? Yes
? Which Application Extensions do you want to install? @salesforce/extension-chakra-store-locator, @salesforce/extension-chakra-storefront
? ⚠️ WARNING: If you choose to extract the Application Extension code,
you will NO LONGER be able to consume upgrades from NPM. All changes
made to the extracted code will be YOUR RESPONSIBILITY.

Do you want to proceed with extracting the Application Extensions code? No
? What is the name of your Project? test
Installing dependencies for test... This may take a few minutes.

Copy the content of packages\extension-chakra-storefront\config\sample.json into the extension-chakra-storefront inside the generated project package.json file.
Strat the project removing Babel cache.

rmdir /s /q node_modules\.cache
set BABEL_DISABLE_CACHE=1 
npm start

Verify

Observe no Babel warnings are present in the dev server logs.
Smoke test the extensions by navigating through the storefront

Check previous PR to test on a Mac machine: #2228

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

alexvuong · 2025-01-30T23:42:51Z

packages/pwa-kit-extension-sdk/src/configs/babel/utils.ts

+                      ([packageName]) =>
+                          fse.realpathSync(
+                              p.resolve(p.join(NODE_MODULES_PATH, packageName, 'src'))
+                          ) + '/**'


should this be \** in window?

kevinxh · 2025-01-30T23:48:20Z

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

        // 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,
+        exclude: /node_modules[\\/](?!(@?[^\\/]+[\\/])?extension-)[^\\/]+[\\/].*$/i,


you could use path.sep to simplify this regex a bit...

new Regex(`${path.sep}`)

alexvuong · 2025-01-30T23:52:44Z

packages/pwa-kit-extension-sdk/src/configs/babel/utils.ts

+            extensionSrcPaths.length > 0 ? `,${extensionSrcPaths.join(',')}` : ''

-    const babelArgs = `--only "app/**,${serverPath},${placeHolderPath}${extensionsPathsStr}"`
+        const babelArgs = `--only "app/**,${serverPath},${placeHolderPath}${extensionsPathsStr}"`


same as above?

kevinxh · 2025-01-31T19:14:48Z

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

-            if (/node_modules\/@[^/]+\/(pwa-kit-extension-sdk|extension-)/.test(filepath)) {
+            if (
+                new RegExp(
+                    `node_modules\\${path.sep}[^\\${path.sep}]+\\${path.sep}(pwa-kit-extension-sdk|@[^\\${path.sep}]+\\${path.sep}extension-|extension-)`


nit, maybe it's worth saving this to a variable for re-use

adamraya added 3 commits January 30, 2025 11:49

Adjust Babel config for Windows

16e5aac

Fix glob pattern

86e18be

Fix exclude Regex for compatibility for both Mac and Windows

ac9a185

adamraya requested a review from a team as a code owner January 30, 2025 21:44

adamraya added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Jan 30, 2025

adamraya added 4 commits January 30, 2025 13:53

Add error handling

84ef757

Update babel config

ce80e4c

Adjust babel config

61f9832

lint

8147c45

alexvuong reviewed Jan 30, 2025

View reviewed changes

kevinxh reviewed Jan 30, 2025

View reviewed changes

alexvuong reviewed Jan 30, 2025

View reviewed changes

alexvuong approved these changes Jan 30, 2025

View reviewed changes

adamraya added 2 commits January 31, 2025 10:27

PR Feedback

990ab93

Add missing double quotes

b31327e

alexvuong approved these changes Jan 31, 2025

View reviewed changes

kevinxh reviewed Jan 31, 2025

View reviewed changes

kevinxh approved these changes Jan 31, 2025

View reviewed changes

adamraya added 2 commits January 31, 2025 14:48

PR Feedback

4c62ee7

Fix tests

0972f26

adamraya merged commit 64bb4ae into feature/extensibility-v2 Jan 31, 2025
27 checks passed

adamraya deleted the W-17373534-ignore-node_modules-windows branch January 31, 2025 23:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[App Extensibility ⚙️] Fix Babel configuration ignore `node_modules` folder adjusted for Windows (@W-17373534@)#2230

[App Extensibility ⚙️] Fix Babel configuration ignore `node_modules` folder adjusted for Windows (@W-17373534@)#2230
adamraya merged 11 commits intofeature/extensibility-v2from
W-17373534-ignore-node_modules-windows

adamraya commented Jan 30, 2025 •

edited

Loading

Uh oh!

alexvuong Jan 30, 2025

Uh oh!

adamraya Jan 30, 2025 •

edited

Loading

Uh oh!

kevinxh Jan 30, 2025 •

edited

Loading

Uh oh!

alexvuong Jan 30, 2025

Uh oh!

kevinxh Jan 31, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

adamraya commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Verify

Checklists

General

Accessibility Compliance

Localization

Uh oh!

alexvuong Jan 30, 2025

Choose a reason for hiding this comment

Uh oh!

adamraya Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevinxh Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexvuong Jan 30, 2025

Choose a reason for hiding this comment

Uh oh!

kevinxh Jan 31, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

adamraya commented Jan 30, 2025 •

edited

Loading

adamraya Jan 30, 2025 •

edited

Loading

kevinxh Jan 30, 2025 •

edited

Loading