Decouple compilers from webpack5-builder

[valentinpalkovic]

In Storybook 8, the Webpack5 builder is not set up with a default compiler. Instead, Storybook or the community will provide add-ons to configure a compiler for Storybook. Since the default experience should still work out of the box, Storybook will provide a @storybook/addon-webpack5-compiler-swc package, which sets up the swc-loader. All newly generated webpack5-based sandboxes, which are SWC capable, will be set up with this addon configured.

To guarantee a smooth migration, we will also provide a @storybook/addon-webpack5-compiler-babel package, which configures the babel-loader and the necessary setup for projects that cannot or don't want to migrate away from a babel setup. Both packages will not be part of the mono repository to be able to follow their own semantic versioning. If Babel 8 or a breaking SWC version gets released, we can easily release a breaking change, too, to support the newest versions. We are not coupled to Storybook's release cycle.

As a preparation for the mentioned changes for Storybook 8.0, we had guaranteed in Storybook 7.6 that SWC is a usable alternative for Webpack5-based projects. We adjusted the tooling (@storybook/addon-coverage or react-docgen) to make it properly work with SWC. Also, we introduced experimental SWC support for Next.js v14 projects!

Tasks

Preview Give feedback

1. Create a @storybook/addon-webpack5-compiler-swc package
2. Create a @storybook/addon-webpack5-compiler-babel package
3. Adjust documentation to setup a compiler for Webpack5
4. Remove babel-loader and swc-loader and its dependencies from builder-webpack5
5. Remove the experimental useSWC feature flag
6. Remove deprecated skipBabel in typescriptOptions
7. Enable Fast refresh per default for Next.js
8. Remove babel and its dependencies from each framework/renderer package
9. Collect a list of issues using SWC for FAQ section

[valentinpalkovic]

@shilman Currently, we are taking babel options, which are applied via presets and pass them into react-docgen: https://github.com/storybookjs/storybook/blob/next/code/presets/react-webpack/src/framework-preset-react-docs.ts#L22

How should this work when people are using Babel 8? react-docgen uses internally Babel 7 currently. Babel 8 presets and plugins are very likely not working with Babel 7. So as soon as a project uses Babel 8 and the user updates the hypothetical @storybook/addon-webpack5-compiler-babel package to a version that uses Babel 8 instead of Babel 7, we can't just read the babel configuration from presets because it has Babel 8 plugins and presets set up, which cannot be passed to react-docgen.

Let's assume react-docgen releases a version that uses Babel 8 instead of Babel 7 internally. Then we could make react-docgen a peer-dependency at least.

The second issue is that all babel options are encapsulated into @storybook/addon-webpack5-compiler-babel. If the user uses @storybook/addon-webpack5-compiler-swc instead, then no babel plugins and presets are set up to pass them further to react-docgen. What should we do in this case? We could pass in Babel plugins and presets that will most likely work with all React projects.

[shilman]

@valentinpalkovic I wonder whether there's some kind of standard babel settings that we can share around for this. For example, csf-tools has a babelParse that is intended to handle most common cases. If we could standardize this in our codebase we might be able to reduce the install size and centralize any bugs. WDYT?

[valentinpalkovic]

I like the idea. Let me take a look tomorrow into csf-tools to figure out which particular settings are passed into it.

[wegry]

I didn't catch this change in https://storybook.js.org/docs/migration-guide and was seeing Unexpected token issues with my typescript stories after attempting to migrate to Storybook 8.

[valentinpalkovic]

This change is described in the full migration docs, which you can find here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5

This isn't part of the short migration version because when you upgrade your Storybook from X to 8, an automigration will guide you through and ask you which compiler addon to install. Were you using the npx storybook@latest upgrade command to upgrade your project? And if so, wasn't the automigeation prompt presented to you?

[wegry]

@valentinpalkovic thanks for the link.

This isn't part of the short migration version because when you upgrade your Storybook from X to 8, an automigration will guide you through and ask you which compiler addon to install. Were you using the npx storybook@latest upgrade command to upgrade your project? And if so, wasn't the automigeation prompt presented to you?

My project uses Yarn 4 and PnP and the auto migrate couldn't parse my .storybook/main.ts with npx. I think what happened was, I:

1. Used npx storybook@latest upgrade
2. When that failed with a partial update around absolute path lookup, used yarn dlx storybook automigrate