fix(storybook): remove custom-babel-loader workaround#36385
fix(storybook): remove custom-babel-loader workaround#36385PaulGMardling wants to merge 4 commits into
Conversation
📊 Bundle size report✅ No changes found |
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
adfff63 to
40f3976
Compare
| // Parse the source map to an object so subsequent loaders (e.g. babel-loader) receive | ||
| // an object rather than the raw JSON string that @swc/core outputs. | ||
| // Without this, babel-loader throws: "Error: .inputSourceMap must be a boolean, object, or undefined" | ||
| parseMap: true, |
There was a problem hiding this comment.
if this isn't default swc setting, this is a breaking change then.
- can you double check
the question is if this is worth the churn in user land.
@dmytrokirpa mentioned in the originating issue some other options ( order re-shuffle ), have we explored that as an alternative ?
There was a problem hiding this comment.
@Hotell
Confirmed that parseMap is not enabled by default in swc-loader.
Rather than changing the shared @fluentui/scripts-storybook configuration, I moved the add-on's Babel transform to enforce: 'pre'. This keeps the fix within the published add-on and avoids requiring external consumers to configure their SWC loader in a particular way. Babel uses parser-only TypeScript and JSX support, while SWC remains responsible for transpiling.
I also added a build-dependent Nx integration test that runs Webpack against the addon's compiled CommonJS output. It covers:
- Default SWC string source maps
- Typed TSX stories
- Preservation of the original source in fullSource
- Final source map composition
The v9 Storybook Webpack build also completes without the inputSourceMap error.
40f3976 to
0daa97b
Compare
2 participants
Previous Behavior
swc-loader passes sourcemaps to subsequent Webpack loaders as raw JSON strings (the native output format of SWC). When the react-storybook-addon-export-to-sandbox post-loader ran babel-loader on story files, babel-loader forwarded that string directly to Babel core, which only accepts boolean | object | undefined for inputSourceMap — causing the build
Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: .inputSourceMap must be a boolean, object, or undefined
A custom wrapper custom-babel-loader.ts was introduced to intercept the call and parse the string before passing it to babel-loader.
New Behavior
parseMap: true.
This tells swc-loader to parse its output sourcemap to an object before passing it downstream, so all subsequent loaders receive an object instead of a string. babel-loader can then be used directly in the addon's webpack rule — no custom wrapper needed.
custom-babel-loader.ts is deleted.
Related Issue(s)
#32290