[App Extensibility ⚙️] Fix Babel configuration ignore node_modules folder (@W-17373534@)#2228
Conversation
adamraya
added
the
skip changelog
| function (filepath) { | ||
| // Ignore node_modules, but include @salesforce/extension-* and pwa-kit-extension-sdk | ||
| if (/node_modules/.test(filepath)) { | ||
| // Only ignore non-extension @salesforce packages | ||
| if ( | ||
| /node_modules\/(?!@salesforce\/pwa-kit-extension-sdk|@salesforce\/extension-)/.test( | ||
| filepath | ||
| ) | ||
| ) { | ||
| return true | ||
| } | ||
| return false | ||
| } | ||
| return false | ||
| } |
There was a problem hiding this comment.
I asked AI to invert the logic to get rid of the nested conditions. Here is the output i got:
function (filepath) {
// Return false if it's an allowed extension package
if (/node_modules\/@salesforce\/(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;
}
| // By default babel doesn't process files in "node_modules" folder, so here we will ensure they are included. | ||
| exclude: /node_modules\/(?!(@?[^/]+\/)?extension-)[^/]+\/.*$/i, |
There was a problem hiding this comment.
normally I wouldn't advocate to document the "what", only the "why"s.
But I feel like when it comes to regexes, we should add a quick explanation of what this regex aims to do. Because it's hard to tell unless you copy and paste the regex to a tool like https://regexr.com/
There was a problem hiding this comment.
i.e. This regex exclude everything in node_modules, but node_modules/extensions-*/ folders
| } | ||
| }, | ||
| ignore: [ | ||
| function (filepath) { |
There was a problem hiding this comment.
TIL you can pass a function into babel config ignore :-o. Any doc link about this?
There was a problem hiding this comment.
It's basically creating an inline Babel plugin. See https://babeljs.io/docs/plugins#plugin-development
| // Only ignore non-extension @salesforce packages | ||
| if ( | ||
| /node_modules\/(?!@salesforce\/pwa-kit-extension-sdk|@salesforce\/extension-)/.test( | ||
| filepath |
There was a problem hiding this comment.
Unblocking comment, let's look a bit further in the future when partners start to create their own extensions. Do they have to follow the pattern of @salesforce/extension-* or just extension-* or their brand name like this @company/extension?
If it is more than @salesforce/extension-* we may want to allow other pattern here too to avoid bug later down the road.
| 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. | ||
| // By default babel doesn't process files in "node_modules" folder, so here we will ensure they are included. | ||
| exclude: /node_modules\/(?!(@?[^/]+\/)?extension-)[^/]+\/.*$/i, |
There was a problem hiding this comment.
Dumb question, we have exclude here and ignore in the babel config? How are they working with each other? I recall they can't be used on a same directory like node_modules because exclude is exclusive to the folder and will override ignore.
There was a problem hiding this comment.
These are different configurations that don't work with each other. One is the Webpack configuration for babel-loader, and the other is the Babel configuration for babel-node, where we cannot use the exclude option. They are used in separate stages.
alexvuong
left a comment
alexvuong
left a comment
There was a problem hiding this comment.
Tested locally. Verified there were no Babel warnings in the terminal. LGTM
3 participants
Description
Problem
We identified an issue where Babel is transpiling all files in
node_modulesdue to using the wrong Babel configuration, leading to two warnings when we start the template-typescript-minimal project.Solution
The PR fixes the Babel configuration to avoid transpiling all files in
node_modules, solving the two warnings we saw when starting the dev server.The Babel warnings no longer appear when starting the dev server.
Screenshare.-.2025-01-28.6_27_27.PM.mp4
Types of Changes
Changes
How to Test-Drive This PR
packages/extension-chakra-storefront/config/sample.jsoninto theextension-chakra-storefrontinside the generated projectpackage.jsonfile.Verify
Checklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization