Cannot set breakpoints within storybook stories

[mollykreis]

🧹 Tech Debt

After storybook was moved to its own package, you can no longer set breakpoints within the storybook files (e.g. button.stories.ts). Setting breakpoints within a component's source does work correctly while running storybook.

[m-akinc]

I synced back to a commit from the end of February, and I still see the same behavior, i.e. <component>.stories.ts does not show up in debugger (only <component>-tests-<component>-stories.iframe.bundle.js) and attempting to put a breakpoint on the equivalent lines in the bundle file results in the message Could not load content for webpack://ni/nimble-components/ (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME).

Given that it wasn't a simple configuration problem introduced when moving to the new storybook package (or even necessarily a regression), I'm going to stop my investigation here.

[fredvisser]

I assume these are related? – storybookjs/storybook#26954 & storybookjs/storybook#26653

[valentinpalkovic]

@fredvisser Could you please try out the canary release of Storybook 0.0.0-pr-27171-sha-f81ba26a for testing purposes and let me know whether it fixes your issues related to source maps? Related PR: storybookjs/storybook#27171

If you're using @storybook/addon-coverage please also update it to use the following canary release: 1.0.4--canary.42.041aa23.0. Related PR: storybookjs/addon-coverage#42

[fredvisser]

@valentinpalkovic - It looks like the Storybook canary release works well - thanks!

(We aren't using @storybook/addon-coverage, so we didn't test that one).

[m-akinc]

Storybook 8.2.0 should contain the fix. Check their releases to see if it has been released yet.

[valentinpalkovic]

The release of 8.2.0 is planned for this week!