Core: Fix addon bundling script

[ndelangen]

Closes: #26126
Closes: Jakob-em/storybook-addon-angular-router#26
Closes: #26030

What I did

I researched the problem and discovered:

• this is only a problem when using webpack
• our addons/actions/dist/index.js (which is an export-type-entry for the addon is compiled in ESM and CJS, however the CJS is compiled for NODE.
• our addons/actions/dist/index.js (which is an import-type-entry for the addon is compiled in ESM and CJS, however the CJS is compiling in all preview related packages (package consolidation would fix this).
• The user's config is compiling stories to CJS, which then causes the CJS version of the export-type-entry to be chosen by webpack.

These factors cause code designed to be run in NODE (unbundled), to be bundled again and then ran in a browser.

It seems webpack just can't really work with the output from esbuild when esbuild compiled for NODE, and webpack compiles for the browser. It creates an empty context, which then causes the issue.

How I fixed it:

I changed the bundling script that bundles our addons, so that it now does:

• always externalizes all the storybook packages, including preview-api.
• it compiles for a platform of neutral.
• it choses whatever entry it deems best, no longer forcing it to use module.

The result is that:

• 7.x repro works with this change applied
• after upgrading the 7.x repro to sb8 beta, and applying this fix, it works
• The dist output of addons/actions/dist/index.js has 7800 lines of code removed.

What is next?

I am pretty confident in this change, however it does change the dynamics with NODE.

I'd like to ask @yannbf 's help to verify if this did not change/break portable stories or the test-runner in some way.

I'd also like @shilman 's position on how safe they feel this change is.

This change would need to be patched back to 7.x.

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

I published a canary, so testing this with any sandbox or repro should be easy.

Check if:

• upgrade works, storybook starts
• if all expected addon panels show up
• if addon-a11y functionality works
• if addon-actions functionality

Also check:

• does the test-runner still works.
• does portable stories work as expected

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-26145-sha-32b8346f. Try it out in a new sandbox by running npx storybook@0.0.0-pr-26145-sha-32b8346f sandbox or in an existing project with npx storybook@0.0.0-pr-26145-sha-32b8346f upgrade.

More information

Published version	0.0.0-pr-26145-sha-32b8346f
Triggered by	@ndelangen
Repository	storybookjs/storybook
Branch	norbert/fix-addon-bundling
Commit	32b8346f
Datetime	Thu Feb 22 12:30:52 UTC 2024 (1708605052)
Workflow run	8004494946

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=26145

[yannbf]

I used the canary to test portable stories and although I found issues, these issues are unrelated to this PR, so from the perspective of portable-stories I think the changes look good 👍

[yannbf]

LGTM I Think!

[shilman]

I'm not confident about patching this back. But let's get it out in 8.0-beta ASAP and see how it does there. Great job!!! ❤️

[AndyOGo]

Will this land in v7 any time soon?

[yannbf]

Will this land in v7 any time soon?

This is included in 7.6.18 and 8.0.0

[AndyOGo]

@yannbf
Am I looking at the wrong package?

This is included in 7.6.18 and 8.0.0

Both of these aren't available:

• https://www.npmjs.com/package/storybook/v/7.6.18
• https://www.npmjs.com/package/@storybook/addon-actions/v/7.6.18

[AndyOGo]

@ndelangen
@yannbf
@shilman
@JReinhold

This is included in 7.6.18 and 8.0.0

Which package please?

These aren't published as v7.6.18

• https://www.npmjs.com/package/storybook/v/7.6.18
• https://www.npmjs.com/package/@storybook/addon-actions/v/7.6.18

[shilman]

@AndyOGo It doesn't look like 7.6.18 has been published. Are you unable to upgrade to Storybook 8?

[AndyOGo]

@shilman Thx for your answer.
Yes, we can't upgrade to v8 at the moment.

[sjwilczynski]

For us, it is also a problem. Would really appreciate if it could be ported back to v7

[reshu0408]

@shilman @yannbf
Its causing a problem for us too. and blocking an important release. Can you please work to get the patch in V7 version. Please. Thankyou.

[yannbf]

@ndelangen seems like the patch release that was going to include this change was closed, I'm not sure why: #26121

[sjwilczynski]

@yannbf, @ndelangen any chances of this being release in 7.x?

[heathercodes]

+1 when will this be released in 7.6.18? we can't jump all the way to v8 yet, we need a working v7 first.

[AndyOGo]

@ndelangen Please respond

[JReinhold]

@AndyOGo, @heathercodes, @sjwilczynski, @reshu0408 v7.6.18 has been released now with the fix.

https://github.com/storybookjs/storybook/releases/tag/v7.6.18