Webpack5: Remove babel and SWC compiler from builder

[valentinpalkovic]

Closes #25172

What I did

This PR removes Babel and SWC from the Webpack5 builder and will add @storybook/addon-webpack5-compiler-swc per default to Webpack5 projects during initialization where possible.

Webpack users have to choose between one of the two add-ons:

• @storybook/addon-webpack5-compiler-swc
• @storybook/addon-webpack5-compiler-babel

to set up SWC or Babel as a loader for Webpack5. The SWC addon will be set up and installed per default for the user during sb init for all Webpack5-based projects.

The following frameworks don't need a particular compiler addon since the compiler is built-in:

• CRA
• Angular
• Next.js
• Ember

Additionally:

• Next.js: Add automatic SWC mode detection (see migration note)
• Next.js: Add custom babel-loader setup to support Babel mode
• Next.js: Integrated fast-refresh "natively" (see migration notes about fast-refresh)
• Preact: Remove Preact < 10 support
• Preact: No longer adds default babel plugins (see migration note)
• WebComponents: No longer adds default babel plugins (see migration note)
• WebComponents: Removed @storybook/preset-web-components-webpack and integrated the code directly into @storybook/web-components-webpack5
• Ember: Add custom babel-loader setup
• Framework: Removes framework.options.builder.useSWC (see migration note)
• Framework: Removes framework.options.fastRefresh (see migration note)
• Typescript: Removes deprecated typescript.skipBabel option
• @babel/core: Removed as peer dependency where possible
• Removed the CLI command to generate a default babel config (npx sb babelrc)
• Configured sb init to install @storybook/addon-webpack5-compiler-<babel|swc> for frameworks, which need an additional compiler

Out of scope

Automigrations are not written yet and will be added in a follow-up step.

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

The sandboxes are already covering a lot of use cases. It might be beneficial, though, to test some Webpack5-based projects. Remember that we currently don't have any auto migrations to automatically setup the necessary addons for users to add a compiler. You have to manually either install @storybook/addon-webpack5-compiler-swc or @storybook/addon-webpack5-compiler-babel and add it to the addons in `.storybook/main.<js|ts>.

The following frameworks don't need a compiler addon for webpack5 at all since the compiler is integrated:

• CRA
• Next.js
• Angular
• Ember

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-25379-sha-d343aef0. Install it by pinning all your Storybook dependencies to that version.

More information

Published version	0.0.0-pr-25379-sha-d343aef0
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/remove-babel-from-webpack5-builder
Commit	d343aef0
Datetime	Mon Jan 8 12:09:43 UTC 2024 (1704715783)
Workflow run	7447197299

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

[github-actions]

	Fails
🚫	PR is marked with "BREAKING CHANGE" label.

Generated by 🚫 dangerJS against 618d45c

[socket-security]

New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
@types/babel-plugin-react-docgen	4.2.3	None	+0	4.23 kB	types
@types/react-refresh	0.14.5	None	+0	5.63 kB	types
@vue/compiler-core	3.4.7	None	+0	600 kB
@storybook/theming	7.5.0	None	+0	724 kB	shilman
@storybook/client-logger	7.5.0	None	+0	7.45 kB	shilman
axe-core	4.8.2	None	+0	2.43 MB	npmdeque
giget	1.1.3	environment	+2	289 kB	pi0
ws	8.15.0	None	+0	140 kB	lpinca
webpack-hot-middleware	2.25.4	None	+0	32.8 kB	evilebottnawi
terser-webpack-plugin	5.3.9	None	+8	7.16 MB	evilebottnawi
unplugin	1.5.1	None	+1	698 kB	sxzz
html-webpack-plugin	5.5.4	None	+10	7.77 MB	evilebottnawi
chai	4.3.10	None	+0	752 kB	keithamus
@digitak/esrun	3.2.26...3.2.25	None	+0/-0	32.8 kB	gin-quin
@analogjs/vite-plugin-angular	0.2.29...0.2.28	None	+64/-23	88.4 MB	brandonroberts
@angular/cli	17.0.9...17.0.5	None	+14/-9	10.7 MB	google-wombot
@emotion/react	11.11.3...11.11.1	None	+1/-1	586 kB	emotion-release-bot
@angular-devkit/build-angular	17.0.9...17.0.5	network	+63/-22	88.3 MB	google-wombot
@angular/compiler-cli	17.0.8...17.0.5	None	+7/-3	38.9 MB	google-wombot
@angular/platform-browser-dynamic	17.0.8...17.0.5	None	+5/-5	46.9 MB	google-wombot
@angular/core	17.0.8...17.0.5	None	+0/-0	23.7 MB	google-wombot
@storybook/addon-designs	7.0.9...7.0.7	None	+13/-3	3.48 MB	yannbf
@angular/platform-browser	17.0.8...17.0.5	None	+3/-3	37.3 MB	google-wombot
@angular/common	17.0.8...17.0.5	None	+1/-1	34.9 MB	google-wombot
@angular/animations	17.0.8...17.0.5	None	+1/-1	25.4 MB	google-wombot
@angular/forms	17.0.8...17.0.5	None	+4/-4	39.3 MB	google-wombot
@angular/compiler	17.0.8...17.0.5	None	+1/-1	33.2 MB	google-wombot
jsdom	23.2.0...23.0.1	None	+3/-3	3.49 MB	domenic
svelte-preprocess	5.1.3...5.1.1	None	+12/-6	6.04 MB	dummdidumm
vue	3.4.5...3.3.11	None	+22/-8	14.1 MB	yyx990803
image-size	1.1.1...1.0.2	None	+0/-0	45.5 kB	netroy
@vitejs/plugin-vue	4.6.2...4.5.2	None	+28/-7	43.5 MB	vitebot

🚮 Removed packages: @storybook/babel-plugin-require-context-hook@1.0.1, @swc/core@1.3.82, babel-plugin-bundled-import-meta@0.3.2

[jonniebigodes]

@valentinpalkovic, thanks for taking the time to update the documentation with this pull request. Appreciate it 🙏 ! I left some items for you to look into when you can. Also, I was wondering if we could either update the Webpack documentation or the compiler page with a small section mentioning the new addons to give them some relevance and avoiding having them getting buried in the migration guide. Let me know, and we'll take it from there.

[shilman]

Great job @valentinpalkovic !! I added some minor edits to make it slightly less wordy

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Issue	Package	Version	Note	Source
New author	@storybook/addon-designs	7.0.7	New Author: yannbf Previous Author: shilman	@storybook/angular@0.0.0-use.local, @storybook/builder-manager@0.0.0-use.local, @storybook/cli@0.0.0-use.local, @storybook/core-server@0.0.0-use.local, @storybook/html-vite@0.0.0-use.local, @storybook/manager@0.0.0-use.local, @storybook/preset-server-webpack@0.0.0-use.local, @storybook/server-webpack5@0.0.0-use.local, @storybook/vue3-vite@0.0.0-use.local, @storybook/web-components-vite@0.0.0-use.local via code/package.json code/ui/manager/package.json
New author	json-parse-even-better-errors	3.0.0	New Author: lukekarrys Previous Author: isaacs	@storybook/angular@0.0.0-use.local via code/package.json @angular/cli@17.0.5 via code/frameworks/angular/package.json
New author	ignore-walk	6.0.3	New Author: npm-cli-ops Previous Author: gar	@storybook/angular@0.0.0-use.local via code/package.json @angular/cli@17.0.5 via code/frameworks/angular/package.json
New author	@npmcli/promise-spawn	7.0.0	New Author: npm-cli-ops Previous Author: nlf	@storybook/angular@0.0.0-use.local via code/package.json @angular/cli@17.0.5 via code/frameworks/angular/package.json
New author	json-stable-stringify	1.0.2	New Author: ljharb Previous Author: substack	@storybook/ember@0.0.0-use.local via code/package.json ember-source@3.28.12 via code/frameworks/ember/package.json
New author	cssstyle	3.0.0	New Author: domenic Previous Author: jon.sakas	@storybook/addon-a11y@0.0.0-use.local, @storybook/addon-actions@0.0.0-use.local, @storybook/addon-backgrounds@0.0.0-use.local, @storybook/addon-controls@0.0.0-use.local, @storybook/addon-docs@0.0.0-use.local, @storybook/addon-essentials@0.0.0-use.local, @storybook/addon-interactions@0.0.0-use.local, @storybook/addon-jest@0.0.0-use.local, @storybook/addon-measure@0.0.0-use.local, @storybook/addon-outline@0.0.0-use.local, @storybook/addon-storysource@0.0.0-use.local, @storybook/addon-toolbars@0.0.0-use.local, @storybook/addon-viewport@0.0.0-use.local, @storybook/angular@0.0.0-use.local, @storybook/blocks@0.0.0-use.local, @storybook/builder-manager@0.0.0-use.local, @storybook/cli@0.0.0-use.local, @storybook/components@0.0.0-use.local, @storybook/core-server@0.0.0-use.local, @storybook/html-vite@0.0.0-use.local, @storybook/jest@0.2.3-next.0, @storybook/manager@0.0.0-use.local, @storybook/nextjs@0.0.0-use.local, @storybook/preset-react-webpack@0.0.0-use.local, @storybook/preset-server-webpack@0.0.0-use.local, @storybook/react@0.0.0-use.local, @storybook/react-vite@0.0.0-use.local, @storybook/react-webpack5@0.0.0-use.local, @storybook/server-webpack5@0.0.0-use.local, @storybook/vue3-vite@0.0.0-use.local, @storybook/web-components-vite@0.0.0-use.local, @testing-library/jest-dom@6.2.0, @vitest/coverage-v8@1.1.3, vitest@1.1.3 via code/package.json @storybook/jest@0.2.3-next.0 via code/addons/interactions/package.json jsdom@23.0.1 via code/frameworks/angular/package.json @testing-library/jest-dom@6.2.0 via code/lib/test/package.json
New author	npm-packlist	8.0.0	New Author: npm-cli-ops Previous Author: lukekarrys	@storybook/angular@0.0.0-use.local via code/package.json @angular/cli@17.0.5 via code/frameworks/angular/package.json
New author	flat-cache	3.1.0	New Author: jaredwray Previous Author: royriojas	@storybook/eslint-config-storybook@3.1.2, @storybook/linter-config@3.1.2, @storybook/nextjs@0.0.0-use.local, @storybook/preset-react-webpack@0.0.0-use.local, @storybook/react-webpack5@0.0.0-use.local, @typescript-eslint/eslint-plugin@5.62.0, @typescript-eslint/experimental-utils@5.62.0, @typescript-eslint/parser@5.62.0, eslint@8.56.0, eslint-import-resolver-typescript@3.6.1, eslint-plugin-import@2.29.1, eslint-plugin-react@7.33.2, eslint-plugin-storybook@0.6.15 via code/package.json react-scripts@5.0.1 via code/presets/create-react-app/package.json @storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0 via code/presets/react-webpack/package.json

Next steps

What is new author?

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore @storybook/addon-designs@7.0.7
• @SocketSecurity ignore json-parse-even-better-errors@3.0.0
• @SocketSecurity ignore ignore-walk@6.0.3
• @SocketSecurity ignore @npmcli/promise-spawn@7.0.0
• @SocketSecurity ignore json-stable-stringify@1.0.2
• @SocketSecurity ignore cssstyle@3.0.0
• @SocketSecurity ignore npm-packlist@8.0.0
• @SocketSecurity ignore flat-cache@3.1.0