Webpack5/Vite: Fix sourcemaps

[valentinpalkovic]

Closes #26954
Closes #26653
Closes ni/nimble#2066

What I did

Fixes sourcemaps for the Webpack5 builder.

Several loaders in the Webpack5 loader chain were not processing source maps properly, resulting in either incorrect or incomplete mapping.

Second, I have configured unplugin for each builder separately so that sourcemaps can be handled individually.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Create a Nextjs sandbox
2. Open Storybook in your browser
3. Throw an error in the onclick handler within the button story. Click the button and see whether it maps to the correct line (just line mapping works because the default sourcemap option in Webpack5 is set to cheap-module-source-map (A SourceMap without column-mappings that simplifies loader Source Maps to a single mapping per line)
4. Run Next.js in babel mode by creating a .babelrc file with the following content:

{
  "presets": ["next/babel"],
  "plugins": []
}

5. Repeat step 3

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-27171-sha-a9f1e1db. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-27171-sha-a9f1e1db
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/fix-webpack5-sourcemaps
Commit	a9f1e1db
Datetime	Fri May 24 10:37:30 UTC 2024 (1716547050)
Workflow run	9222633276

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=27171

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a9f1e1d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[yannbf]

LGTM, but I'm not sure about potential downsides/side effects. I'd say we should properly test with a canary as we don't have any tests in place regarding sourcemaps (I don't even know how we'd be testing this in an automated way)

[shilman]

Is there some way to do a single automated test of the toolchain in both Webpack and Vite, e.g.

import { Button } from './Button';
/** use jsdoc to to exercise the csf enhancement */
export default { component: Button };
/** again */
export const Basic = {}

So we can (1) verify that it's working properly, and more importantly (2) verify that it doesn't regress later

[valentinpalkovic]

@shilman I had the idea to use a source map visualization like this one: https://github.com/evanw/source-map-visualization?tab=readme-ov-file. Instead, it analyzes a story and shows the correct source map mapping.

I tried it out for an hour, but I would need more time to get it working somehow. If it would work, we can just easily snapshot things :)

[sag1v]

@shilman Is this fix available in v7.6.20? I'm experiencing a similar issue of not seeing some of the source maps (webpak5)

[valentinpalkovic]

Hi @sag1v

this isn’t patches back to Storybook 7. Please upgrade to 8 and let us know if you have difficulties with the upgrade.

[sag1v]

Upgrading to v8 is a bit of a blocker for us atm as we still use yarn v1 in this specific project unfortunately.

Is there something i can do in "user land" to fix it?

[valentinpalkovic]

Although we don’t explicitly support yarn 1, it should still work with Storybook 8. Can you elaborate your issues in a new GitHub issue? I will try to help you upgrading to SB 8.

I don’t think you can fix this issue from your side unfortunately.

[sag1v]

I will try to make time for it later on this week. Thanks 🙏🏽