dharmeshgurnani _.

Author

Dharmesh Gurnani

Date Published

SFCC Project Banner

Recently, my team and I were deep into a Salesforce Commerce Cloud project, migrating an existing storefront to use the SFRA Webpack Builder (WPB) for our build system. Everything was progressing smoothly—until we hit a blocker that stalled development for a couple of days.

The Blocker

Certain JavaScript files from older plugins and custom cartridges stopped working as expected once integrated into the WPB build. It was mysterious at first. These files, which had been working fine in the previous build process, were suddenly causing conflicts or simply not functioning correctly, breaking critical client-side behavior.

Digging In

As the lead on this part of the project, I rolled up my sleeves and dived into debugging. Over two intensive days, I traced the issue back to how the new Webpack setup was handling JavaScript file inclusions. The strict bundling and compilation rules meant that some legacy or specialized JS files were being processed in ways that weren’t compatible with their original usage.

I realized that instead of trying to force these files through the default build pipeline, what if we could simply exclude them from being bundled, and instead just copy them directly to the static assets folder?

Turning Point and Fix

After some experimentation, I crafted a mechanism allowing specific JS files to be excluded from the Webpack build process by configuring an exclude list per cartridge. Complementing this, we added the ability to copy those excluded files directly to the static directory so they could be served as intended.

This approach worked perfectly — it cleared the blocker and let the rest of the build proceed smoothly. It also ensured that SCSS and other assets still compiled normally, maintaining the benefits of the WPB.

Sharing with the Community

Recognizing this was likely a common pain point for other developers migrating older cartridges to WPB, I documented the feature and submitted a pull request to the SFRA Webpack Builder repository.

The contribution, labeled “Exclude JS from Build,” was accepted after community review and is now available for all developers facing similar issues. This project reinforced the power of open source collaboration — what started as a local fix became a community solution.

How You Can Use It

In your Webpack build config, simply specify which JS files to exclude per cartridge:

1module.exports.excludeJS = {
2  "cartridges/app_custom": [
3    "filesToBeExcluded.js",
4  ],
5};


Use the copyConfig to move these files to your static folder. This setup lets you control compilation and preserves compatibility with legacy code.

View pull request
You can view the pull request and related discussion on the SFRA Webpack Builder GitHub repository:

Pull Request #99 – Exclude JS from Build

Contribution discussion

Note: Since this repository is behind Salesforce GitHub SSO, you’ll need to log in with your B2C Commerce Cloud account to access these links

"This story captures a real challenge, the discovery process, and the community value of contributing practical solutions as a developer. I hope it inspires others to share their learnings too."

0%