Merge branch 'next' into yann/remove-deprecated-primary-storyblock-props

2025-04-07 06:41:11 +08:00 · 2024-01-10 09:13:38 +01:00 · 2024-01-10 09:13:38 +01:00 · defcd7c56a
commit defcd7c56a
parent 3140c35e5a 4dc764f7a3
329 changed files with 3056 additions and 6795 deletions
--- a/.yarn/releases/yarn-4.0.0.cjs
+++ b/.yarn/releases/yarn-4.0.0.cjs
--- a/.yarn/releases/yarn-4.0.2.cjs
+++ b/.yarn/releases/yarn-4.0.2.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -8,4 +8,4 @@ nodeLinker: node-modules

 npmPublishAccess: public

-yarnPath: .yarn/releases/yarn-4.0.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@ -1,3 +1,20 @@
+## 8.0.0-alpha.8
+
+- Addon Links: Remove LinkTo from direct import - [#25418](https://github.com/storybookjs/storybook/pull/25418), thanks [@yannbf](https://github.com/yannbf)!
+- Addon docs: Remove deprecated parameters - [#25469](https://github.com/storybookjs/storybook/pull/25469), thanks [@yannbf](https://github.com/yannbf)!
+- Builder Vite: Remove StorybookViteConfig type in favor of StorybookConfig - [#25441](https://github.com/storybookjs/storybook/pull/25441), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Error on explicit actions while rendering or playing - [#25238](https://github.com/storybookjs/storybook/pull/25238), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Core: Remove collapseAll and expandAll methods - [#25486](https://github.com/storybookjs/storybook/pull/25486), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Remove storyIndexers in favor of experimental_indexers - [#25468](https://github.com/storybookjs/storybook/pull/25468), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Remove unused staticDir type - [#25415](https://github.com/storybookjs/storybook/pull/25415), thanks [@yannbf](https://github.com/yannbf)!
+- Doc blocks: Remove deprecated props from Description block - [#25457](https://github.com/storybookjs/storybook/pull/25457), thanks [@yannbf](https://github.com/yannbf)!
+- Manager API: Remove deprecated navigateToSettingsPage method - [#25467](https://github.com/storybookjs/storybook/pull/25467), thanks [@yannbf](https://github.com/yannbf)!
+- React: Remove deprecated setGlobalConfig portable stories api - [#25442](https://github.com/storybookjs/storybook/pull/25442), thanks [@yannbf](https://github.com/yannbf)!
+- TypeScript: Remove deprecated addons module types - [#25485](https://github.com/storybookjs/storybook/pull/25485), thanks [@yannbf](https://github.com/yannbf)!
+- Types: Remove DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types - [#25477](https://github.com/storybookjs/storybook/pull/25477), thanks [@yannbf](https://github.com/yannbf)!
+- Types: Remove Framework in favor of Renderer types - [#25476](https://github.com/storybookjs/storybook/pull/25476), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Remove deprecated WithTooltip props - [#25440](https://github.com/storybookjs/storybook/pull/25440), thanks [@yannbf](https://github.com/yannbf)!
+
 ## 8.0.0-alpha.7

 - Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)!
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -25,6 +25,7 @@ If you run `yarn start` and encounter the following error, try rerunning `yarn s
 ```sh
 >  NX   ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json'
 ```
+
 If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command:

 ```sh
@ -37,11 +38,11 @@ By executing this command, you will be able to see which untracked or ignored fi

 If you have forked the repository, you should [disable Github Actions for your repo](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository) as many of them (e.g. pushing to sandbox) will fail without proper authorization. In your Github repo, go to Settings > Actions > General > set the Actions Permissions to **Disable actions**.

-# Running against different sandbox templates
+## Running against different sandbox templates

 You can also pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run.

-# Making code changes
+## Making code changes

 If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:

@ -56,10 +57,10 @@ yarn build --watch react core-server api addon-docs

 3. If you are running the sandbox in "unlinked" mode you'll need to re-run the sandbox from the `publish` step to see the changes:

-```
+```sh
 yarn task --task dev --template <your template> --start-from=publish
 ```

-# Contributing to Storybook
+## Contributing to Storybook

 For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute).
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,6 +1,7 @@
 <h1>Migration</h1>

 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Removal of `storiesOf`-API](#removal-of-storiesof-api)
  - [Removed deprecated shim packages](#removed-deprecated-shim-packages)
  - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
  - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
@ -9,6 +10,11 @@
    - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
    - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
  - [Core changes](#core-changes)
+    - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed)
+    - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5)
+    - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed)
+    - [`typescript.skipBabel` removed](#typescriptskipbabel-removed)
+    - [Dropping support for Yarn 1](#dropping-support-for-yarn-1)
    - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
    - [Autotitle breaking fixes](#autotitle-breaking-fixes)
    - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons)
@ -18,15 +24,22 @@
    - [Icons is deprecated](#icons-is-deprecated)
    - [Removed postinstall](#removed-postinstall)
    - [Removed stories.json](#removed-storiesjson)
+    - [Removed `sb babelrc` command](#removed-sb-babelrc-command)
  - [Framework-specific changes](#framework-specific-changes)
    - [React](#react)
      - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
    - [Next.js](#nextjs)
      - [Require Next.js 13.5 and up](#require-nextjs-135-and-up)
+      - [Automatic SWC mode detection](#automatic-swc-mode-detection)
    - [Angular](#angular)
      - [Require Angular 15 and up](#require-angular-15-and-up)
    - [Svelte](#svelte)
      - [Require Svelte 4 and up](#require-svelte-4-and-up)
+    - [Preact](#preact)
+      - [Require Preact 10 and up](#require-preact-10-and-up)
+      - [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins)
+    - [Web Components](#web-components)
+      - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects)
  - [Deprecations which are now removed](#deprecations-which-are-now-removed)
    - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
    - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact)
@ -356,6 +369,14 @@

 ## From version 7.x to 8.0.0

+### Removal of `storiesOf`-API
+
+The `storiesOf` API has been removed in Storybook 8.0.
+
+If you need to dynamically create stories, you will need to implement this via the experimental `experimental_indexers` [API](#storyindexers-is-replaced-with-experimental_indexers).
+
+For migrating to CSF, see: [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+
 ### Removed deprecated shim packages

 In Storybook 7, these packages existed for backwards compatibility, but were marked as deprecated:
@ -457,6 +478,99 @@ Referencing stories by `id`, `name` or `story` in the Story block is not possibl

 ### Core changes

+#### `framework.options.builder.useSWC` for Webpack5-based projects removed
+
+In Storybook 8.0, we have removed the `framework.options.builder.useSWC` option. The `@storybook/builder-webpack5` package is now compiler-agnostic and does not depend on Babel or SWC.
+
+If you want to use SWC, you can add the necessary addon:
+
+```sh
+npx storybook@latest add @storybook/addon-webpack-compiler-swc
+```
+
+The goal is to make @storybook/builder-webpack5 lighter and more flexible. We are not locked into a specific compiler or compiler version anymore. This allows us to support Babel 7/8, SWC, and other compilers simultaneously.
+
+#### Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`
+
+In Storybook 8.0, we have removed the `@storybook/builder-webpack5` package's dependency on Babel. This means that Babel is not preconfigured in `@storybook/builder-webpack5`. If you want to use Babel, you can add the necessary addon:
+
+```sh
+npx storybook@latest add @storybook/addon-webpack-compiler-swc
+```
+
+We are doing this to make Storybook more flexible and to allow users to use a variety of compilers like SWC, Babel or even pure TypeScript.
+
+#### `framework.options.fastRefresh` for Webpack5-based projects removed
+
+In Storybook 8.0, we have removed the `framework.options.fastRefresh` option.
+
+The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it locks users into a specific Babel version. This could become a problem when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly.
+
+Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a sub-optimal development experience.
+
+We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. The following configuration will configure fast-refresh if Storybook does not automatically pick up your fast-refresh configuration: 
+
+`package.json`:
+
+```diff
+{
+  "devDependencies": {
+   "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+   "react-refresh": "^0.14.0",
+  }
+}
+```
+
+`babel.config.js` (optionally, add it to `.storybook/main.js`):
+
+```diff
+const isProdBuild = process.env.NODE_ENV === 'production';
+
+module.exports = (api) => {
+  return {
+    plugins: [
+     !isProdBuild && 'react-refresh/babel',
+    ].filter(Boolean),
+  };
+};
+```
+
+`.storybook/main.js`:
+
+```diff
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+const isProdBuild = process.env.NODE_ENV === 'production';
+const config = {
+  webpackFinal: (config) => {
+   config.plugins = [
+     !isProdBuild && new ReactRefreshWebpackPlugin({
+       overlay: {
+         sockIntegration: 'whm',
+       },
+     }),
+     ...config.plugins,
+   ].filter(Boolean);
+    return config;
+  },
+};
+
+export default config;
+```
+
+This approach aligns with our philosophy of transparency and puts users in control of their Webpack and Babel configurations.
+
+We want to minimize magic behind the scenes. By removing `framework.options.fastRefresh`, we are reducing unnecessary configuration. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment.
+
+You don't have to add fast refresh to `@storybook/nextjs` since it is already configured there as a default to match the same experience as `next dev`.
+
+#### `typescript.skipBabel` removed
+
+We have removed the `typescript.skipBabel` option in Storybook 8.0. Please use `typescript.skipCompiler` instead.
+
+#### Dropping support for Yarn 1
+
+Storybook will stop providing fixes aimed at Yarn 1 projects. This does not necessarily mean that Storybook will stop working for Yarn 1 projects, just that the team won't provide more fixes aimed at it. For context, it's been 6 years since the release of Yarn 1, and Yarn is currently in version 4, which was [released in October 2023](https://yarnpkg.com/blog/release/4.0).
+
 #### Dropping support for Node.js 16

 In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life on 2023-09-11. Storybook 8 supports Node.js 18 and above.
@ -541,6 +655,14 @@ In addition to the built storybook, `storybook build` generates two files, `inde

 In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91

+#### Removed `sb babelrc` command
+
+The `sb babelrc` command was used to generate a `.babelrc` file for Storybook. This command is now removed.
+
+From version 8.0 onwards, Storybook is compiler-agnostic and does not depend on Babel or SWC if you use Webpack 5. This move was made to make Storybook more flexible and allow users to configure their own Babel setup according to their project needs and setup. If you need a custom Babel configuration, you can create a `.babelrc` file yourself and configure it according to your project setup.
+
+The reasoning behind is to condense and provide some clarity to what's happened to both the command and what's shifted with the upcoming release.
+
 ### Framework-specific changes

 #### React
@ -567,6 +689,13 @@ For more information see: https://storybook.js.org/docs/react/api/main-config-ty

 Starting in 8.0, Storybook requires Next.js 13.5 and up.

+##### Automatic SWC mode detection
+
+Similar to how Next.js detects if SWC should be used, Storybook will follow more or less the same rules:
+
+- If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. 
+- Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`.
+
 #### Angular

 ##### Require Angular 15 and up
@ -579,6 +708,64 @@ Starting in 8.0, Storybook requires Angular 15 and up.

 Starting in 8.0, Storybook requires Svelte 4 and up.

+#### Preact
+
+##### Require Preact 10 and up
+
+Starting in 8.0, Storybook requires Preact 10 and up.
+
+##### No longer adds default Babel plugins
+
+Until now, Storybook provided a set of default Babel plugins that were applied to Preact projects using Webpack, including the runtime automatic import plugin to allow Preact's `h` pragma to render JSX. However, this is no longer the case in Storybook 8.0. If you want to use this plugin, or if you're going to use TypeScript with Preact, you will need to add it to your Babel config.
+
+```js
+.babelrc
+
+{
+  "plugins": [
+    [
+      // Add this to automatically import `h` from `preact` when needed
+      "@babel/plugin-transform-react-jsx", {
+        "importSource": "preact",
+        "runtime": "automatic" 
+      }
+    ],
+    // Add this if you want to use TypeScript with Preact
+    "@babel/preset-typescript"
+  ],
+}
+```
+
+If you want to configure the plugins only for Storybook, you can add the same setting to your `.storybook/main.js` file.
+
+```js
+const config = {
+  ...
+  babel: async (options) => {
+    options.plugins.push(
+      [
+        "@babel/plugin-transform-react-jsx", {
+          "importSource": "preact",
+          "runtime": "automatic" 
+        }
+      ], 
+      "@babel/preset-typescript"
+    )
+    return options;
+  },
+}
+
+export default config
+```
+
+We are doing this to apply the same configuration you defined in your project. This streamlines the experience of using Storybook with Preact. Additionally, we are not vendor-locked to a specific Babel version anymore, which means that you can upgrade Babel without breaking your Storybook.
+
+#### Web Components
+
+##### Dropping default babel plugins in Webpack5-based projects
+
+Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web Component projects by default. This is no longer the case, as any Web Components project will use the configuration you've included. Additionally, if you're using either the `@babel/plugin-syntax-dynamic-import` or `@babel/plugin-syntax-import-meta` plugins, you no longer have to include them as they are now part of `@babel/preset-env`.
+
 ### Deprecations which are now removed

 #### --use-npm flag in storybook CLI
@ -754,7 +941,7 @@ To summarize:

 #### typescript.skipBabel deprecated

-We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead.
+We will remove the `typescript.skipBabel` option in Storybook 8.0. Please use `typescript.skipCompiler` instead.

 #### Primary doc block accepts of prop

@ -787,7 +974,7 @@ These changes should not be breaking for your users, unless you support Storyboo

 #### `storyStoreV6` and `storiesOf` is deprecated

-`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0.
+`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.

 If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience.
 In many cases you can get started with the migration by using two migration scripts:
@ -807,7 +994,7 @@ Alternatively you can build your own `storiesOf` implementation by leveraging th

 #### `storyIndexers` is replaced with `experimental_indexers`

-Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.
+Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.

 The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter.

@ -871,7 +1058,7 @@ addons.register('my-addon', () => {
 });
 ```

-The API: `addons.addPanel()` is now deprecated, and will be removed in 8.0.0. Please use `addons.add()` instead.
+The API: `addons.addPanel()` is now deprecated, and will be removed in 8.0. Please use `addons.add()` instead.

 The `render` method can now be a `React.FunctionComponent` (without the `children` prop). Storybook will now render it, rather than calling it as a function.

--- a/RESOLUTIONS.md
+++ b/RESOLUTIONS.md
@ -8,8 +8,4 @@ svelte-check@3.4.6 (bug: 3.5.x): Type issues

 ## code/ui/components/package.json

-overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230
-
-## code/package.json
-
-@babel/core@^7.23.2: Make sure we use the latest version of @babel/traverse, which is a dependency of @babel/core, since it contains a fix for a vulnerability: https://security.snyk.io/vuln/SNYK-JS-BABELTRAVERSE-5962462
+overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230
--- a/code/.yarnrc.yml
+++ b/code/.yarnrc.yml
@ -2,6 +2,8 @@ compressionLevel: 0

 enableGlobalCache: true

+installStatePath: ../.yarn/code-install-state.gz
+
 logFilters:
  - code: YN0005
    level: discard
@ -23,7 +25,6 @@ plugins:
 unsafeHttpWhitelist:
  - localhost

-yarnPath: ../.yarn/releases/yarn-4.0.0.cjs
-installStatePath: '../.yarn/code-install-state.gz'
+yarnPath: ../.yarn/releases/yarn-4.0.2.cjs
 # Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
 # checksumBehavior: 'update'
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -60,7 +60,7 @@
    "@storybook/client-logger": "workspace:*",
    "@storybook/components": "workspace:*",
    "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.1",
+    "@storybook/icons": "^1.2.3",
    "@storybook/manager-api": "workspace:*",
    "@storybook/preview-api": "workspace:*",
    "@storybook/theming": "workspace:*",
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -53,7 +53,7 @@
  },
  "dependencies": {
    "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.1",
+    "@storybook/icons": "^1.2.3",
    "memoizerific": "^1.11.3",
    "ts-dedent": "^2.0.0"
  },
--- a/code/addons/controls/README.md
+++ b/code/addons/controls/README.md
@ -176,4 +176,4 @@ Like [story parameters](https://storybook.js.org/docs/react/writing-stories/para

 ### How do controls work with MDX?

-When importing stories from your CSF file into MDX, controls will work the same way. See [the documentation](https://storybook.js.org/docs/writing-docs/mdx#basic-example) for examples.
+When importing stories from your CSF file into MDX, controls will work the same way. See [the documentation](https://storybook.js.org/docs/writing-docs/mdx#basic-example) for examples.
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-mdx-gfm",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "GitHub Flavored Markdown in Storybook",
  "keywords": [
    "addon",
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-highlight",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Highlight DOM nodes within your stories",
  "keywords": [
    "storybook-addons",
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
@ -49,7 +49,7 @@
  },
  "dependencies": {
    "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.1",
+    "@storybook/icons": "^1.2.3",
    "@storybook/types": "workspace:*",
    "jest-mock": "^27.0.6",
    "polished": "^4.2.2",
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
@ -65,7 +65,7 @@
  },
  "dependencies": {
    "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.1",
+    "@storybook/icons": "^1.2.3",
    "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
@ -55,7 +55,7 @@
  },
  "dependencies": {
    "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.1",
+    "@storybook/icons": "^1.2.3",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
--- a/code/addons/storysource/preset.js
+++ b/code/addons/storysource/preset.js
@ -1 +1 @@
-import './dist/preset';
+require('./dist/preset');
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-themes",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Switch between multiple themes for you components in Storybook",
  "keywords": [
    "css",
@ -59,7 +59,7 @@
    "@storybook/client-logger": "workspace:*",
    "@storybook/components": "workspace:*",
    "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.1",
+    "@storybook/icons": "^1.2.3",
    "@storybook/manager-api": "workspace:*",
    "@storybook/preview-api": "workspace:*",
    "@storybook/theming": "workspace:*",
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -55,7 +55,7 @@
    "@storybook/components": "workspace:*",
    "@storybook/core-events": "workspace:*",
    "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.1",
+    "@storybook/icons": "^1.2.3",
    "@storybook/manager-api": "workspace:*",
    "@storybook/preview-api": "workspace:*",
    "@storybook/theming": "workspace:*",
--- a/code/builders/builder-manager/package.json
+++ b/code/builders/builder-manager/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-manager",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook manager builder",
  "keywords": [
    "storybook"
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "A plugin to run and build Storybooks with Vite",
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
  "bugs": {
--- a/code/builders/builder-vite/src/codegen-entries.ts
+++ b/code/builders/builder-vite/src/codegen-entries.ts
@ -1,48 +0,0 @@
-import { loadPreviewOrConfigFile } from '@storybook/core-common';
-import type { Options } from '@storybook/types';
-import slash from 'slash';
-import { listStories } from './list-stories';
-
-const absoluteFilesToImport = async (
-  files: string[],
-  name: string,
-  normalizePath: (id: string) => string
-) =>
-  files
-    .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`)
-    .join('\n');
-
-export async function generateVirtualStoryEntryCode(options: Options) {
-  const { normalizePath } = await import('vite');
-  const storyEntries = await listStories(options);
-  const resolveMap = storyEntries.reduce<Record<string, string>>(
-    (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),
-    {}
-  );
-  const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
-
-  return `
-    ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)}
-
-    function loadable(key) {
-      return {${modules}}[key];
-    }
-    
-    Object.assign(loadable, {
-      keys: () => (${JSON.stringify(Object.keys(resolveMap))}),
-      resolve: (key) => (${JSON.stringify(resolveMap)}[key])
-    });
-
-    export function configStories(configure) {
-      configure(loadable, { hot: import.meta.hot }, false);
-    }
-  `.trim();
-}
-
-export async function generatePreviewEntryCode({ configDir }: Options) {
-  const previewFile = loadPreviewOrConfigFile({ configDir });
-  if (!previewFile) return '';
-
-  return `import * as preview from '${slash(previewFile)}';
-  export default preview;`;
-}
--- a/code/builders/builder-vite/src/codegen-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-iframe-script.ts
@ -1,116 +0,0 @@
-import { getRendererName } from '@storybook/core-common';
-import type { Options, PreviewAnnotation } from '@storybook/types';
-import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
-import { processPreviewAnnotation } from './utils/process-preview-annotation';
-
-export async function generateIframeScriptCode(options: Options, projectRoot: string) {
-  const { presets } = options;
-  const rendererName = await getRendererName(options);
-
-  const previewAnnotations = await presets.apply<PreviewAnnotation[]>(
-    'previewAnnotations',
-    [],
-    options
-  );
-  const configEntries = [...previewAnnotations]
-    .filter(Boolean)
-    .map((path) => processPreviewAnnotation(path, projectRoot));
-
-  const filesToImport = (files: string[], name: string) =>
-    files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n');
-
-  const importArray = (name: string, length: number) =>
-    new Array(length).fill(0).map((_, i) => `${name}_${i}`);
-
-  // noinspection UnnecessaryLocalVariableJS
-  /** @todo Inline variable and remove `noinspection` */
-  // language=JavaScript
-  const code = `
-    // Ensure that the client API is initialized by the framework before any other iframe code
-    // is loaded. That way our client-apis can assume the existence of the API+store
-    import { configure } from '${rendererName}';
-
-    import { logger } from '@storybook/client-logger';
-    import * as previewApi from "@storybook/preview-api";
-    ${filesToImport(configEntries, 'config')}
-
-    import * as preview from '${virtualPreviewFile}';
-    import { configStories } from '${virtualStoriesFile}';
-
-    const {
-      addDecorator,
-      addParameters,
-      addLoader,
-      addArgs,
-      addArgTypes,
-      addStepRunner,
-      addArgTypesEnhancer,
-      addArgsEnhancer,
-      setGlobalRender,
-    } = previewApi;
-
-    const configs = [${importArray('config', configEntries.length)
-      .concat('preview.default')
-      .join(',')}].filter(Boolean)
-
-    configs.map(config => config.default ? config.default : config).forEach(config => {
-      Object.keys(config).forEach((key) => {
-        const value = config[key];
-        switch (key) {
-          case 'args': {
-            return addArgs(value);
-          }
-          case 'argTypes': {
-            return addArgTypes(value);
-          }
-          case 'decorators': {
-            return value.forEach((decorator) => addDecorator(decorator, false));
-          }
-          case 'loaders': {
-            return value.forEach((loader) => addLoader(loader, false));
-          }
-          case 'parameters': {
-            return addParameters({ ...value }, false);
-          }
-          case 'argTypesEnhancers': {
-            return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));
-          }
-          case 'argsEnhancers': {
-            return value.forEach((enhancer) => addArgsEnhancer(enhancer))
-          }
-          case 'render': {
-            return setGlobalRender(value)
-          }
-          case 'globals':
-          case 'globalTypes': {
-            const v = {};
-            v[key] = value;
-            return addParameters(v, false);
-          }
-          case 'decorateStory':
-          case 'applyDecorators':
-          case 'renderToDOM': // deprecated
-          case 'renderToCanvas': {
-            return null; // This key is not handled directly in v6 mode.
-          }
-          case 'runStep': {
-            return addStepRunner(value);
-          }
-          default: {
-            // eslint-disable-next-line prefer-template
-            return console.log(key + ' was not supported :( !');
-          }
-        }
-      });
-    })
-    
-    /* TODO: not quite sure what to do with this, to fix HMR
-    if (import.meta.hot) {
-        import.meta.hot.accept();    
-    }
-    */
-
-    configStories(configure);
-    `.trim();
-  return code;
-}
--- a/code/builders/builder-vite/src/codegen-importfn-script.ts
+++ b/code/builders/builder-vite/src/codegen-importfn-script.ts
@ -1,7 +1,6 @@
 import * as path from 'path';

 import type { Options } from '@storybook/types';
-import { logger } from '@storybook/node-logger';

 import { listStories } from './list-stories';

@ -28,11 +27,7 @@ function toImportPath(relativePath: string) {
 async function toImportFn(stories: string[]) {
  const { normalizePath } = await import('vite');
  const objectEntries = stories.map((file) => {
-    const ext = path.extname(file);
    const relativePath = normalizePath(path.relative(process.cwd(), file));
-    if (!['.js', '.jsx', '.ts', '.tsx', '.mdx', '.svelte', '.vue'].includes(ext)) {
-      logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`);
-    }

    return `  '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
  });
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@ -69,7 +69,6 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
    window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb();
    
    window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
-    window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: window.__STORYBOOK_PREVIEW__.storyStore });
    window.__STORYBOOK_PREVIEW__.initialize({ importFn, getProjectAnnotations });
    
    ${generateHMRHandler(frameworkName)};
--- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
@ -4,10 +4,8 @@ import * as fs from 'fs';
 import type { Plugin } from 'vite';
 import type { Options } from '@storybook/types';
 import { transformIframeHtml } from '../transform-iframe-html';
-import { generateIframeScriptCode } from '../codegen-iframe-script';
 import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
 import { generateImportFnScriptCode } from '../codegen-importfn-script';
-import { generateVirtualStoryEntryCode, generatePreviewEntryCode } from '../codegen-entries';
 import { generateAddonSetupCode } from '../codegen-set-addon-channel';

 import {
@ -90,27 +88,16 @@ export function codeGeneratorPlugin(options: Options): Plugin {
      return undefined;
    },
    async load(id, config) {
-      const storyStoreV7 = options.features?.storyStoreV7;
      if (id === virtualStoriesFile) {
-        if (storyStoreV7) {
-          return generateImportFnScriptCode(options);
-        }
-        return generateVirtualStoryEntryCode(options);
+        return generateImportFnScriptCode(options);
      }

      if (id === virtualAddonSetupFile) {
        return generateAddonSetupCode();
      }

-      if (id === virtualPreviewFile && !storyStoreV7) {
-        return generatePreviewEntryCode(options);
-      }
-
      if (id === virtualFileId) {
-        if (storyStoreV7) {
-          return generateModernIframeScriptCode(options, projectRoot);
-        }
-        return generateIframeScriptCode(options, projectRoot);
+        return generateModernIframeScriptCode(options, projectRoot);
      }

      if (id === iframeId) {
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
@ -63,7 +63,6 @@
    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@babel/core": "^7.23.2",
    "@storybook/channels": "workspace:*",
    "@storybook/client-logger": "workspace:*",
    "@storybook/core-common": "workspace:*",
@ -72,10 +71,8 @@
    "@storybook/node-logger": "workspace:*",
    "@storybook/preview": "workspace:*",
    "@storybook/preview-api": "workspace:*",
-    "@swc/core": "^1.3.82",
    "@types/node": "^18.0.0",
    "@types/semver": "^7.3.4",
-    "babel-loader": "^9.0.0",
    "browser-assert": "^1.2.1",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "constants-browserify": "^1.0.0",
@ -90,7 +87,6 @@
    "process": "^0.11.10",
    "semver": "^7.3.7",
    "style-loader": "^3.3.1",
-    "swc-loader": "^0.2.3",
    "terser-webpack-plugin": "^5.3.1",
    "ts-dedent": "^2.0.0",
    "url": "^0.11.0",
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@ -8,7 +8,6 @@ import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import type { TransformOptions as EsbuildOptions } from 'esbuild';
-import type { JsMinifyOptions as SwcOptions } from '@swc/core';
 import type { Options } from '@storybook/types';
 import { globalsNameReferenceMap } from '@storybook/preview/globals';
 import {
@ -20,7 +19,6 @@ import {
 import { type BuilderOptions } from '@storybook/core-webpack';
 import { dedent } from 'ts-dedent';
 import type { TypescriptOptions } from '../types';
-import { createBabelLoader, createSWCLoader } from './loaders';
 import { getVirtualModules } from './virtual-module-mapping';

 const getAbsolutePath = <I extends string>(input: I): I =>
@ -106,8 +104,7 @@ export default async (

  const builderOptions = await getBuilderOptions<BuilderOptions>(options);

-  const shouldCheckTs =
-    typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler;
+  const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipCompiler;
  const tsCheckOptions = typescriptOptions.checkOptions || {};

  const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {};
@ -235,9 +232,6 @@ export default async (
            fullySpecified: false,
          },
        },
-        builderOptions.useSWC
-          ? await createSWCLoader(Object.keys(virtualModuleMapping), options)
-          : await createBabelLoader(options, typescriptOptions, Object.keys(virtualModuleMapping)),
        {
          test: /\.md$/,
          type: 'asset/source',
@ -273,7 +267,6 @@ export default async (
      ...(isProd
        ? {
            minimize: true,
-            // eslint-disable-next-line no-nested-ternary
            minimizer: options.build?.test?.esbuildMinify
              ? [
                  new TerserWebpackPlugin<EsbuildOptions>({
@ -285,17 +278,6 @@ export default async (
                    },
                  }),
                ]
-              : builderOptions.useSWC
-              ? [
-                  new TerserWebpackPlugin<SwcOptions>({
-                    minify: TerserWebpackPlugin.swcMinify,
-                    terserOptions: {
-                      sourceMap: !options.build?.test?.disableSourcemaps,
-                      mangle: false,
-                      keep_fnames: true,
-                    },
-                  }),
-                ]
              : [
                  new TerserWebpackPlugin({
                    parallel: true,
--- a/code/builders/builder-webpack5/src/preview/loaders.ts
+++ b/code/builders/builder-webpack5/src/preview/loaders.ts
@ -1,57 +0,0 @@
-import { getProjectRoot } from '@storybook/core-common';
-import type { Options as SwcOptions } from '@swc/core';
-import { dedent } from 'ts-dedent';
-import { logger } from '@storybook/node-logger';
-import type { Options } from '@storybook/types';
-import type { TypescriptOptions } from '../types';
-
-export const createBabelLoader = async (
-  options: Options & { typescriptOptions: TypescriptOptions },
-  typescriptOptions: TypescriptOptions,
-  excludes: string[] = []
-) => {
-  logger.info(dedent`Using Babel compiler`);
-  const babelOptions = await options.presets.apply('babel', {}, options);
-  return {
-    test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/,
-    use: [
-      {
-        loader: require.resolve('babel-loader'),
-        options: babelOptions,
-      },
-    ],
-    include: [getProjectRoot()],
-    exclude: [/node_modules/, ...excludes],
-  };
-};
-
-export const createSWCLoader = async (excludes: string[] = [], options: Options) => {
-  logger.info(dedent`Using SWC compiler`);
-
-  const swc = await options.presets.apply('swc', {}, options);
-  const typescriptOptions = await options.presets.apply<{ skipCompiler?: boolean }>(
-    'typescript',
-    {},
-    options
-  );
-
-  const config: SwcOptions = {
-    ...swc,
-    jsc: {
-      ...(swc.jsc ?? {}),
-      parser: {
-        ...(swc.jsc?.parser ?? {}),
-        syntax: 'typescript',
-        tsx: true,
-        dynamicImport: true,
-      },
-    },
-  };
-  return {
-    test: typescriptOptions.skipCompiler ? /\.(mjs|cjs|jsx?)$/ : /\.(mjs|cjs|tsx?|jsx?)$/,
-    loader: require.resolve('swc-loader'),
-    options: config,
-    include: [getProjectRoot()],
-    exclude: [/node_modules/, ...excludes],
-  };
-};
--- a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
+++ b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
@ -1,16 +1,14 @@
+import type { Options, PreviewAnnotation } from '@storybook/types';
+import { join, resolve } from 'path';
 import {
  getBuilderOptions,
-  getRendererName,
  handlebars,
-  interpolate,
  loadPreviewOrConfigFile,
  normalizeStories,
  readTemplate,
 } from '@storybook/core-common';
-import type { Options, PreviewAnnotation } from '@storybook/types';
-import { isAbsolute, join, resolve } from 'path';
 import slash from 'slash';
-import { toImportFn, toRequireContextString } from '@storybook/core-webpack';
+import { toImportFn } from '@storybook/core-webpack';
 import type { BuilderOptions } from '../types';

 export const getVirtualModules = async (options: Options) => {
@ -37,79 +35,31 @@ export const getVirtualModules = async (options: Options) => {
          return entry.absolute;
        }

-        // TODO: Remove as soon as we drop support for disabled StoryStoreV7
-        if (isAbsolute(entry)) {
-          return entry;
-        }
-
        return slash(entry);
      }
    ),
    loadPreviewOrConfigFile(options),
  ].filter(Boolean);

-  if (options.features?.storyStoreV7) {
-    const storiesFilename = 'storybook-stories.js';
-    const storiesPath = resolve(join(workingDir, storiesFilename));
+  const storiesFilename = 'storybook-stories.js';
+  const storiesPath = resolve(join(workingDir, storiesFilename));

-    const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
-    virtualModules[storiesPath] = toImportFn(stories, { needPipelinedImport });
-    const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
-    virtualModules[configEntryPath] = handlebars(
-      await readTemplate(
-        require.resolve(
-          '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
-        )
-      ),
-      {
-        storiesFilename,
-        previewAnnotations,
-      }
-      // We need to double escape `\` for webpack. We may have some in windows paths
-    ).replace(/\\/g, '\\\\');
-    entries.push(configEntryPath);
-  } else {
-    const rendererName = await getRendererName(options);
-
-    const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js'));
-    virtualModules[rendererInitEntry] = `import '${slash(rendererName)}';`;
-    entries.push(rendererInitEntry);
-
-    const entryTemplate = await readTemplate(
-      require.resolve('@storybook/builder-webpack5/templates/virtualModuleEntry.template.js')
-    );
-
-    previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => {
-      if (!previewAnnotationFilename) return;
-
-      // Ensure that relative paths end up mapped to a filename in the cwd, so a later import
-      // of the `previewAnnotationFilename` in the template works.
-      const entryFilename = previewAnnotationFilename.startsWith('.')
-        ? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js`
-        : `${previewAnnotationFilename}-generated-config-entry.js`;
-      // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
-      // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
-      virtualModules[entryFilename] = interpolate(entryTemplate, {
-        previewAnnotationFilename,
-      });
-      entries.push(entryFilename);
-    });
-    if (stories.length > 0) {
-      const storyTemplate = await readTemplate(
-        require.resolve('@storybook/builder-webpack5/templates/virtualModuleStory.template.js')
-      );
-      // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
-      // in the user's webpack mode, which may be strict about the use of require/import.
-      // See https://github.com/storybookjs/storybook/issues/14877
-      const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`));
-      virtualModules[storiesFilename] = interpolate(storyTemplate, {
-        rendererName,
-      })
-        // Make sure we also replace quotes for this one
-        .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));
-      entries.push(storiesFilename);
+  const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
+  virtualModules[storiesPath] = toImportFn(stories, { needPipelinedImport });
+  const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
+  virtualModules[configEntryPath] = handlebars(
+    await readTemplate(
+      require.resolve(
+        '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
+      )
+    ),
+    {
+      storiesFilename,
+      previewAnnotations,
    }
-  }
+    // We need to double escape `\` for webpack. We may have some in windows paths
+  ).replace(/\\/g, '\\\\');
+  entries.push(configEntryPath);

  return {
    virtualModules,
--- a/code/builders/builder-webpack5/src/types.ts
+++ b/code/builders/builder-webpack5/src/types.ts
@ -37,7 +37,6 @@ export interface StorybookConfigWebpack extends Pick<StorybookConfig, 'webpack'

 export type BuilderOptions = {
  fsCache?: boolean;
-  useSWC?: boolean;
  lazyCompilation?: boolean;
 };

--- a/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js
+++ b/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js
@ -1,65 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import {
-  addDecorator,
-  addParameters,
-  addLoader,
-  addArgs,
-  addArgTypes,
-  addStepRunner,
-  addArgsEnhancer,
-  addArgTypesEnhancer,
-  setGlobalRender,
-} from '@storybook/preview-api';
-import * as previewAnnotations from '{{previewAnnotationFilename}}';
-
-const config = previewAnnotations.default ?? previewAnnotations;
-
-Object.keys(config).forEach((key) => {
-  const value = config[key];
-  switch (key) {
-    case 'args': {
-      return addArgs(value);
-    }
-    case 'argTypes': {
-      return addArgTypes(value);
-    }
-    case 'decorators': {
-      return value.forEach((decorator) => addDecorator(decorator, false));
-    }
-    case 'loaders': {
-      return value.forEach((loader) => addLoader(loader, false));
-    }
-    case 'parameters': {
-      return addParameters({ ...value }, false);
-    }
-    case 'argTypesEnhancers': {
-      return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));
-    }
-    case 'argsEnhancers': {
-      return value.forEach((enhancer) => addArgsEnhancer(enhancer));
-    }
-    case 'render': {
-      return setGlobalRender(value);
-    }
-    case 'globals':
-    case 'globalTypes': {
-      const v = {};
-      v[key] = value;
-      return addParameters(v, false);
-    }
-    case '__namedExportsOrder':
-    case 'decorateStory':
-    case 'renderToDOM': // deprecated
-    case 'renderToCanvas': {
-      return null; // This key is not handled directly in v6 mode.
-    }
-    case 'runStep': {
-      return addStepRunner(value);
-    }
-    default: {
-      return console.log(
-        `Unknown key '${key}' exported by preview annotation file '{{previewAnnotationFilename}}'`
-      );
-    }
-  }
-});
--- a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
+++ b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
@ -20,7 +20,6 @@ const preview = new PreviewWeb();
 window.__STORYBOOK_PREVIEW__ = preview;
 window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
 window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });

 preview.initialize({ importFn, getProjectAnnotations });

--- a/code/builders/builder-webpack5/templates/virtualModuleStory.template.js
+++ b/code/builders/builder-webpack5/templates/virtualModuleStory.template.js
@ -1,3 +0,0 @@
-const { configure } = require('{{rendererName}}');
-
-configure(['{{stories}}'], module, false);
--- a/code/e2e-tests/addon-backgrounds.spec.ts
+++ b/code/e2e-tests/addon-backgrounds.spec.ts
@ -48,17 +48,6 @@ test.describe('addon-backgrounds', () => {
    });

    test('button should appear for unattached .mdx files', async ({ page }) => {
-      // SSv6 does not support .mdx files. There is a unattached stories.mdx file
-      // at /docs/addons-docs-stories-mdx-unattached--docs, but these are functionally
-      // really attached
-
-      // eslint-disable-next-line jest/no-disabled-tests
-      test.skip(
-        // eslint-disable-next-line jest/valid-title
-        templateName.includes('ssv6'),
-        'Only run this test for Sandboxes with StoryStoreV7 enabled'
-      );
-
      const sbPage = new SbPage(page);

      // We start on the introduction page by default.
--- a/code/e2e-tests/json-files.spec.ts
+++ b/code/e2e-tests/json-files.spec.ts
@ -1,9 +1,7 @@
-/* eslint-disable jest/no-disabled-tests */
 import { test, expect } from '@playwright/test';
 import process from 'process';

 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
-const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';

 test.describe('JSON files', () => {
  test.beforeEach(async ({ page }) => {
@ -11,11 +9,6 @@ test.describe('JSON files', () => {
  });

  test('should have index.json', async ({ page }) => {
-    test.skip(
-      // eslint-disable-next-line jest/valid-title
-      templateName.includes('ssv6'),
-      'Only run this test for Sandboxes with StoryStoreV7 enabled'
-    );
    const json = await page.evaluate(() => fetch('/index.json').then((res) => res.json()));

    expect(json).toEqual({
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
  "keywords": [
    "storybook",
@ -99,7 +99,6 @@
    "@angular/forms": ">=15.0.0 < 18.0.0",
    "@angular/platform-browser": ">=15.0.0 < 18.0.0",
    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0",
-    "@babel/core": "*",
    "rxjs": "^6.0.0 || ^7.4.0",
    "typescript": "^4.0.0 || ^5.0.0",
    "zone.js": ">= 0.11.1 < 1.0.0"
--- a/code/frameworks/angular/src/client/index.ts
+++ b/code/frameworks/angular/src/client/index.ts
@ -2,9 +2,6 @@

 import './globals';

-// eslint-disable-next-line import/export
-export * from './public-api';
-// eslint-disable-next-line import/export
 export * from './public-types';

 export type { StoryFnAngularReturnType as IStory } from './types';
--- a/code/frameworks/angular/src/client/public-api.ts
+++ b/code/frameworks/angular/src/client/public-api.ts
@ -1 +0,0 @@
-export * from './public-types';
--- a/code/frameworks/angular/src/client/public-types.ts
+++ b/code/frameworks/angular/src/client/public-types.ts
@ -31,7 +31,7 @@ export type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, Transform
 export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TransformEventType<TArgs>>;

 /**
- * Story function that represents a CSFv3 component example.
+ * Story object that represents a CSFv3 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
--- a/code/frameworks/angular/src/preset.ts
+++ b/code/frameworks/angular/src/preset.ts
@ -37,7 +37,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
 export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => {
  return {
    ...config,
-    skipBabel: true,
    skipCompiler: true,
  };
 };
--- a/code/frameworks/angular/src/typings.d.ts
+++ b/code/frameworks/angular/src/typings.d.ts
@ -6,7 +6,6 @@ declare var NODE_ENV: string | undefined;
 declare var __STORYBOOK_ADDONS_CHANNEL__: any;
 declare var __STORYBOOK_ADDONS_PREVIEW: any;
 declare var __STORYBOOK_COMPODOC_JSON__: any;
-declare var __STORYBOOK_CLIENT_API__: any;
 declare var __STORYBOOK_PREVIEW__: any;
 declare var __STORYBOOK_STORY_STORE__: any;
 declare var CHANNEL_OPTIONS: any;
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ember",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
  "bugs": {
@ -38,10 +38,12 @@
    "@storybook/global": "^5.0.0",
    "@storybook/preview-api": "workspace:*",
    "@storybook/types": "workspace:*",
+    "babel-loader": "9.1.3",
    "find-up": "^5.0.0",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
+    "@types/babel__preset-env": "^7",
    "ember-source": "~3.28.1",
    "typescript": "^5.3.2"
  },
--- a/code/frameworks/ember/src/client/preview/index.ts
+++ b/code/frameworks/ember/src/client/preview/index.ts
@ -1 +0,0 @@
-import './globals';
--- a/code/frameworks/ember/src/preset.ts
+++ b/code/frameworks/ember/src/preset.ts
@ -1,5 +1,7 @@
 import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
+import { getVirtualModules } from '@storybook/builder-webpack5';
+import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common';
 import type { StorybookConfig } from './types';

 const getAbsolutePath = <I extends string>(input: I): I =>
@ -10,6 +12,37 @@ export const addons: PresetProperty<'addons'> = [
  require.resolve('./server/framework-preset-ember-docs'),
 ];

+export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
+  const { virtualModules } = await getVirtualModules(options);
+
+  const babelOptions = await options.presets.apply('babel', {}, options);
+  const typescriptOptions = await options.presets.apply('typescript', {}, options);
+
+  return {
+    ...baseConfig,
+    module: {
+      ...baseConfig.module,
+      rules: [
+        ...(baseConfig.module?.rules ?? []),
+        {
+          test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: {
+                cacheDirectory: resolvePathInStorybookCache('babel'),
+                ...babelOptions,
+              },
+            },
+          ],
+          include: [getProjectRoot()],
+          exclude: [/node_modules/, ...Object.keys(virtualModules)],
+        },
+      ],
+    },
+  };
+};
+
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
  const framework = await options.presets.apply('framework');

--- a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts
+++ b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts
@ -1,5 +1,6 @@
 import { precompile } from 'ember-source/dist/ember-template-compiler';
-import type { PresetProperty } from '@storybook/types';
+import type { PresetProperty, PresetPropertyFn } from '@storybook/types';
+import type { TransformOptions } from '@babel/core';
 import { findDistFile } from '../util';

 let emberOptions: any;
@ -13,7 +14,7 @@ function precompileWithPlugins(string: string, options: any) {
  return precompile(string, precompileOptions);
 }

-export const babel: PresetProperty<'babel'> = (config, options) => {
+export const babel: PresetPropertyFn<'babel'> = (config: TransformOptions, options) => {
  if (options && options.presetsList) {
    options.presetsList.forEach((e: any, index: number) => {
      if (e.preset && e.preset.emberOptions) {
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -58,7 +58,7 @@
    "typescript": "^5.3.2"
  },
  "engines": {
-    "node": "^14.18 || >=16"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -57,9 +57,6 @@
  "devDependencies": {
    "typescript": "^5.3.2"
  },
-  "peerDependencies": {
-    "@babel/core": "*"
-  },
  "engines": {
    "node": ">=18.0.0"
  },
--- a/code/frameworks/nextjs/README.md
+++ b/code/frameworks/nextjs/README.md
@ -123,12 +123,6 @@ export default {
  framework: {
    // name: '@storybook/react-webpack5', // Remove this
    name: '@storybook/nextjs', // Add this
-    options: {
-      builder: {
-        // Set useSWC to true if you want to try out the experimental SWC compiler in Next.js >= 14.0.0
-        useSWC: true,
-      },
-    },
  },
 };
 ```
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/nextjs",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Next.js",
  "keywords": [
    "storybook",
@ -89,6 +89,7 @@
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.23.2",
    "@babel/runtime": "^7.23.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
    "@storybook/addon-actions": "workspace:*",
    "@storybook/builder-webpack5": "workspace:*",
    "@storybook/core-common": "workspace:*",
@ -97,8 +98,10 @@
    "@storybook/preset-react-webpack": "workspace:*",
    "@storybook/preview-api": "workspace:*",
    "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@types/node": "^18.0.0",
    "@types/semver": "^7.3.4",
+    "babel-loader": "^9.1.3",
    "css-loader": "^6.7.3",
    "find-up": "^5.0.0",
    "fs-extra": "^11.1.0",
@ -108,6 +111,7 @@
    "pnp-webpack-plugin": "^1.7.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
+    "react-refresh": "^0.14.0",
    "resolve-url-loader": "^5.0.0",
    "sass-loader": "^12.4.0",
    "semver": "^7.3.5",
@ -124,6 +128,7 @@
    "@types/babel__plugin-transform-runtime": "^7",
    "@types/babel__preset-env": "^7",
    "@types/loader-utils": "^2.0.5",
+    "@types/react-refresh": "^0",
    "next": "^14.0.2",
    "typescript": "^5.3.2",
    "webpack": "^5.65.0"
@ -143,7 +148,7 @@
    }
  },
  "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/nextjs/src/babel/loader.ts
+++ b/code/frameworks/nextjs/src/babel/loader.ts
@ -0,0 +1,28 @@
+import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common';
+import { getVirtualModules } from '@storybook/builder-webpack5';
+import type { Options } from '@storybook/types';
+
+export const configureBabelLoader = async (baseConfig: any, options: Options) => {
+  const { virtualModules } = await getVirtualModules(options);
+
+  const babelOptions = await options.presets.apply('babel', {}, options);
+  const typescriptOptions = await options.presets.apply('typescript', {}, options);
+
+  baseConfig.module.rules = [
+    ...baseConfig.module.rules,
+    {
+      test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            cacheDirectory: resolvePathInStorybookCache('babel'),
+            ...babelOptions,
+          },
+        },
+      ],
+      include: [getProjectRoot()],
+      exclude: [/node_modules/, ...Object.keys(virtualModules)],
+    },
+  ];
+};
--- a/code/frameworks/nextjs/src/babel/preset.ts
+++ b/code/frameworks/nextjs/src/babel/preset.ts
@ -120,6 +120,7 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
      ],
    ],
    plugins: [
+      isDevelopment && require.resolve('react-refresh/babel'),
      !useJsxRuntime && [
        require('./plugins/jsx-pragma'),
        {
--- a/code/frameworks/nextjs/src/fastRefresh/webpack.ts
+++ b/code/frameworks/nextjs/src/fastRefresh/webpack.ts
@ -0,0 +1,13 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+
+export const configureFastRefresh = (baseConfig: WebpackConfig): void => {
+  baseConfig.plugins = [
+    ...(baseConfig.plugins ?? []),
+    new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockIntegration: 'whm',
+      },
+    }),
+  ];
+};
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@ -1,22 +1,26 @@
 // https://storybook.js.org/docs/react/addons/writing-presets
 import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
-import type { ConfigItem, PluginItem } from '@babel/core';
+import type { ConfigItem, PluginItem, TransformOptions } from '@babel/core';
 import { loadPartialConfig } from '@babel/core';
 import { getProjectRoot } from '@storybook/core-common';
+import fs from 'fs';
+import semver from 'semver';
 import { configureConfig } from './config/webpack';
 import { configureCss } from './css/webpack';
 import { configureImports } from './imports/webpack';
 import { configureStyledJsx } from './styledJsx/webpack';
 import { configureImages } from './images/webpack';
 import { configureRSC } from './rsc/webpack';
-import { configureRuntimeNextjsVersionResolution } from './utils';
+import { configureRuntimeNextjsVersionResolution, getNextjsVersion } from './utils';
 import type { FrameworkOptions, StorybookConfig } from './types';
 import TransformFontImports from './font/babel';
 import { configureNextFont } from './font/webpack/configureNextFont';
 import nextBabelPreset from './babel/preset';
 import { configureNodePolyfills } from './nodePolyfills/webpack';
 import { configureSWCLoader } from './swc/loader';
+import { configureBabelLoader } from './babel/loader';
+import { configureFastRefresh } from './fastRefresh/webpack';

 export const addons: PresetProperty<'addons'> = [
  dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@ -78,10 +82,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (
  return result;
 };

-// Not even sb init - automigrate - running dev
-// You're using a version of Nextjs prior to v10, which is unsupported by this framework.
-
-export const babel: PresetProperty<'babel'> = async (baseConfig) => {
+export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOptions) => {
  const configPartial = loadPartialConfig({
    ...baseConfig,
    filename: `${getProjectRoot()}/__fake__.js`,
@ -141,14 +142,23 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
  const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>(
    'frameworkOptions'
  );
-  const { options: { nextConfigPath, builder } = {} } = frameworkOptions;
+  const { options: { nextConfigPath } = {} } = frameworkOptions;
  const nextConfig = await configureConfig({
    baseConfig,
    nextConfigPath,
    configDir: options.configDir,
  });

-  configureNextFont(baseConfig, builder?.useSWC);
+  const babelRCPath = join(getProjectRoot(), '.babelrc');
+  const hasBabelConfig = fs.existsSync(babelRCPath);
+  const nextjsVersion = getNextjsVersion();
+  const isDevelopment = options.configType !== 'PRODUCTION';
+
+  const isNext14orNewer = semver.gte(nextjsVersion, '14.0.0');
+  const useSWC =
+    isNext14orNewer && (nextConfig.experimental?.forceSwcTransforms ?? !hasBabelConfig);
+
+  configureNextFont(baseConfig, useSWC);
  configureRuntimeNextjsVersionResolution(baseConfig);
  configureImports({ baseConfig, configDir: options.configDir });
  configureCss(baseConfig, nextConfig);
@ -156,13 +166,18 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
  configureStyledJsx(baseConfig);
  configureNodePolyfills(baseConfig);

+  if (isDevelopment) {
+    configureFastRefresh(baseConfig);
+  }
+
  if (options.features?.experimentalNextRSC) {
    configureRSC(baseConfig);
  }

-  // TODO: In Storybook 8.0, we have to check whether the babel-compiler addon is used. Otherwise, swc should be used.
-  if (builder?.useSWC) {
+  if (useSWC) {
    await configureSWCLoader(baseConfig, options, nextConfig);
+  } else {
+    await configureBabelLoader(baseConfig, options);
  }

  return baseConfig;
--- a/code/frameworks/nextjs/src/swc/loader.ts
+++ b/code/frameworks/nextjs/src/swc/loader.ts
@ -1,19 +1,8 @@
 import { getProjectRoot } from '@storybook/core-common';
 import { getVirtualModules } from '@storybook/builder-webpack5';
-import type { Options, Preset } from '@storybook/types';
+import type { Options } from '@storybook/types';
 import type { NextConfig } from 'next';
 import path from 'path';
-import type { RuleSetRule } from 'webpack';
-import semver from 'semver';
-import { NextjsSWCNotSupportedError } from '@storybook/core-events/server-errors';
-import { getNextjsVersion } from '../utils';
-
-const applyFastRefresh = async (options: Options) => {
-  const isDevelopment = options.configType === 'DEVELOPMENT';
-  const framework = await options.presets.apply<Preset>('framework');
-  const reactOptions = typeof framework === 'object' ? framework.options : {};
-  return isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
-};

 export const configureSWCLoader = async (
  baseConfig: any,
@ -21,23 +10,15 @@ export const configureSWCLoader = async (
  nextConfig: NextConfig
 ) => {
  const isDevelopment = options.configType !== 'PRODUCTION';
-  const version = getNextjsVersion();
-
-  if (semver.lt(version, '14.0.0')) {
-    throw new NextjsSWCNotSupportedError();
-  }

  const dir = getProjectRoot();

  const { virtualModules } = await getVirtualModules(options);

  baseConfig.module.rules = [
-    // TODO: Remove filtering in Storybook 8.0
-    ...baseConfig.module.rules.filter((r: RuleSetRule) => {
-      return !r.loader?.includes('swc-loader');
-    }),
+    ...baseConfig.module.rules,
    {
-      test: /\.(m?(j|t)sx?)$/,
+      test: /\.((c|m)?(j|t)sx?)$/,
      include: [getProjectRoot()],
      exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
      enforce: 'post',
@ -50,7 +31,7 @@ export const configureSWCLoader = async (
          rootDir: dir,
          pagesDir: `${dir}/pages`,
          appDir: `${dir}/apps`,
-          hasReactRefresh: await applyFastRefresh(options),
+          hasReactRefresh: isDevelopment,
          nextConfig,
          supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
            dir,
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx
@ -24,7 +24,7 @@ function Component() {
      name: 'Prefetch',
    },
    {
-      // @ts-expect-error (a legacy nextjs api?)
+      // @ts-expect-error (old API)
      cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
      name: 'Push HTML',
    },
@ -33,7 +33,7 @@ function Component() {
      name: 'Refresh',
    },
    {
-      // @ts-expect-error (a legacy nextjs api?)
+      // @ts-expect-error (old API)
      cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
      name: 'Replace',
    },
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -60,7 +60,7 @@
    "vite": "^4.0.0 || ^5.0.0"
  },
  "engines": {
-    "node": ">=16"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Preact: Develop Preact Component in isolation.",
  "keywords": [
    "storybook"
@ -58,8 +58,7 @@
    "typescript": "^5.3.2"
  },
  "peerDependencies": {
-    "@babel/core": "*",
-    "preact": "^8.0.0||^10.0.0"
+    "preact": ">=10.0.0"
  },
  "engines": {
    "node": ">=18.0.0"
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -65,7 +65,7 @@
    "vite": "^4.0.0 || ^5.0.0"
  },
  "engines": {
-    "node": ">=16"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -53,15 +53,11 @@
    "@types/node": "^18.0.0"
  },
  "peerDependencies": {
-    "@babel/core": "^7.22.0",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "typescript": "*"
  },
  "peerDependenciesMeta": {
-    "@babel/core": {
-      "optional": true
-    },
    "typescript": {
      "optional": true
    }
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/server-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -68,7 +68,7 @@
    "vite": "^4.0.0 || ^5.0.0"
  },
  "engines": {
-    "node": "^14.18 || >=16"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -58,7 +58,6 @@
    "typescript": "^5.3.2"
  },
  "peerDependencies": {
-    "@babel/core": "*",
    "svelte": "^4.0.0 || ^5.0.0-next.16",
    "svelte-loader": "*"
  },
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/sveltekit",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for SvelteKit",
  "keywords": [
    "storybook",
@ -68,7 +68,7 @@
    "vite": "^4.0.0 || ^5.0.0"
  },
  "engines": {
-    "node": "^14.18 || >=16"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -62,7 +62,7 @@
    "vite": "^4.0.0 || ^5.0.0"
  },
  "engines": {
-    "node": "^14.18 || >=16"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -59,9 +59,7 @@
    "vue": "3.0.0"
  },
  "peerDependencies": {
-    "@babel/core": "*",
    "@vue/compiler-sfc": "^3.0.0",
-    "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
    "vue": "^3.0.0"
  },
  "engines": {
--- a/code/frameworks/vue3-webpack5/src/preset.ts
+++ b/code/frameworks/vue3-webpack5/src/preset.ts
@ -24,6 +24,5 @@ export const core: PresetProperty<'core'> = async (config, options) => {

 export const typescript: PresetProperty<'typescript'> = async (config) => ({
  ...config,
-  skipBabel: true,
  skipCompiler: true,
 });
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -58,7 +58,7 @@
    "typescript": "^5.3.2"
  },
  "engines": {
-    "node": "^14.18 || >=16"
+    "node": ">=18.0.0"
  },
  "publishConfig": {
    "access": "public"
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
  "keywords": [
    "lit",
@ -50,10 +50,8 @@
    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@babel/preset-env": "^7.23.2",
    "@storybook/builder-webpack5": "workspace:*",
    "@storybook/core-common": "workspace:*",
-    "@storybook/preset-web-components-webpack": "workspace:*",
    "@storybook/web-components": "workspace:*",
    "@types/node": "^18.0.0"
  },
--- a/code/frameworks/web-components-webpack5/src/preset.ts
+++ b/code/frameworks/web-components-webpack5/src/preset.ts
@ -4,10 +4,6 @@ import type { PresetProperty } from '@storybook/types';
 const getAbsolutePath = <I extends string>(input: I): I =>
  dirname(require.resolve(join(input, 'package.json'))) as any;

-export const addons: PresetProperty<'addons'> = [
-  getAbsolutePath('@storybook/preset-web-components-webpack'),
-];
-
 export const core: PresetProperty<'core'> = async (config, options) => {
  const framework = await options.presets.apply('framework');

--- a/code/frameworks/web-components-webpack5/src/types.ts
+++ b/code/frameworks/web-components-webpack5/src/types.ts
@ -1,7 +1,7 @@
 import type {
  StorybookConfig as StorybookConfigBase,
  TypescriptOptions as TypescriptOptionsWebComponents,
-} from '@storybook/preset-web-components-webpack';
+} from '@storybook/types';
 import type {
  BuilderOptions,
  StorybookConfigWebpack,
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channels",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@ -1,6 +1,6 @@
 {
  "name": "sb",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@ -1,6 +1,6 @@
 {
  "name": "storybook",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
--- a/code/lib/cli/.babelrc.json
+++ b/code/lib/cli/.babelrc.json
@ -1,21 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": 10
-        },
-        "useBuiltIns": "usage",
-        "corejs": "3"
-      }
-    ]
-  ],
-  "ignore": [
-    "./src/rendererAssets",
-    "./src/generators/**/template",
-    "./src/generators/**/template-csf",
-    "./src/generators/**/template-csf-ts",
-    "./src/generators/**/template-mdx"
-  ]
-}
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/cli",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
  "description": "Storybook's CLI - install, dev, build, upgrade, and more",
  "keywords": [
    "cli",
@ -56,8 +56,6 @@
    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
    "@babel/types": "^7.23.0",
    "@ndelangen/get-tarball": "^3.0.7",
    "@storybook/codemod": "workspace:*",
--- a/code/lib/cli/src/automigrate/fixes/index.ts
+++ b/code/lib/cli/src/automigrate/fixes/index.ts
@ -13,7 +13,6 @@ import { removedGlobalClientAPIs } from './remove-global-client-apis';
 import { mdx1to2 } from './mdx-1-to-2';
 import { autodocsTrue } from './autodocs-true';
 import { nodeJsRequirement } from './nodejs-requirement';
-import { missingBabelRc } from './missing-babelrc';
 import { angularBuilders } from './angular-builders';
 import { incompatibleAddons } from './incompatible-addons';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
@ -38,7 +37,6 @@ export const allFixes: Fix[] = [
  mdx1to2,
  mdxgfm,
  autodocsTrue,
-  missingBabelRc,
  angularBuildersMultiproject,
  angularBuilders,
  wrapRequire,
@ -46,4 +44,4 @@ export const allFixes: Fix[] = [
  storyshotsMigration,
 ];

-export const initFixes: Fix[] = [missingBabelRc, eslintPlugin];
+export const initFixes: Fix[] = [eslintPlugin];
--- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts
@ -1,136 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { describe, afterEach, it, expect, vi } from 'vitest';
-
-import type { StorybookConfig } from '@storybook/types';
-import * as fsExtra from 'fs-extra';
-import { missingBabelRc } from './missing-babelrc';
-import type { JsPackageManager } from '../../js-package-manager';
-
-vi.mock('fs-extra', async () => import('../../../../../__mocks__/fs-extra'));
-
-const babelContent = JSON.stringify({
-  sourceType: 'unambiguous',
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: { chrome: 100, safari: 15, firefox: 91 },
-      },
-    ],
-    '@babel/preset-typescript',
-    '@babel/preset-react',
-  ],
-  plugins: [],
-});
-
-const check = async ({
-  packageManager = {
-    retrievePackageJson: () => ({}),
-  },
-  main: mainConfig = {},
-  storybookVersion = '7.0.0',
-  extraFiles,
-}: {
-  packageManager?: any;
-  main?: Partial<StorybookConfig> & Record<string, unknown>;
-  storybookVersion?: string;
-  extraFiles?: Record<string, any>;
-}) => {
-  if (extraFiles) {
-    vi.mocked<typeof import('../../../../../__mocks__/fs-extra')>(fsExtra as any).__setMockFiles(
-      extraFiles
-    );
-  }
-
-  return missingBabelRc.check({
-    packageManager,
-    mainConfig: mainConfig as any,
-    storybookVersion,
-  });
-};
-
-const packageManager = {
-  retrievePackageJson: () =>
-    Promise.resolve({
-      devDependencies: {},
-      dependencies: {},
-    }),
-} as Partial<JsPackageManager>;
-
-const packageManagerWithBabelField = {
-  retrievePackageJson: () =>
-    Promise.resolve({
-      devDependencies: {},
-      dependencies: {},
-      babel: babelContent,
-    }),
-} as Partial<JsPackageManager>;
-
-describe('missing-babelrc fix', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('skips when storybook version < 7.0.0', async () => {
-    await expect(check({ storybookVersion: '6.3.2', main: {} })).resolves.toBeNull();
-  });
-
-  it('skips when babelrc config is present', async () => {
-    // different babel extensions
-    await expect(
-      check({
-        packageManager,
-        extraFiles: { '.babelrc': babelContent },
-        main: { framework: '@storybook/react' },
-      })
-    ).resolves.toBeNull();
-    await expect(
-      check({
-        packageManager,
-        extraFiles: { '.babelrc.json': babelContent },
-        main: { framework: '@storybook/react' },
-      })
-    ).resolves.toBeNull();
-    await expect(
-      check({
-        packageManager,
-        extraFiles: { 'babel.config.json': babelContent },
-        main: { framework: '@storybook/react' },
-      })
-    ).resolves.toBeNull();
-
-    await expect(
-      check({
-        packageManager: packageManagerWithBabelField,
-        main: { framework: '@storybook/react' },
-      })
-    ).resolves.toBeNull();
-  });
-
-  it('skips when using a framework that provides babel config', async () => {
-    await expect(
-      check({ main: { framework: '@storybook/nextjs' }, packageManager })
-    ).resolves.toBeNull();
-  });
-
-  it('skips when using CRA preset', async () => {
-    await expect(
-      check({
-        main: { framework: '@storybook/react', addons: ['@storybook/preset-create-react-app'] },
-        packageManager,
-      })
-    ).resolves.toBeNull();
-  });
-
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('prompts when babelrc file is missing and framework does not provide babel config', async () => {
-    await expect(
-      check({
-        packageManager,
-        main: { framework: '@storybook/react-webpack5' },
-      })
-    ).resolves.toEqual({
-      needsBabelRc: true,
-    });
-  });
-});
--- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts
+++ b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts
@ -1,90 +0,0 @@
-import chalk from 'chalk';
-import dedent from 'ts-dedent';
-import semver from 'semver';
-import { loadPartialConfigAsync } from '@babel/core';
-import type { Fix } from '../types';
-import { generateStorybookBabelConfigInCWD } from '../../babel-config';
-import { getFrameworkPackageName } from '../helpers/mainConfigFile';
-
-interface MissingBabelRcOptions {
-  needsBabelRc: boolean;
-}
-
-const logger = console;
-
-const frameworksThatNeedBabelConfig = [
-  '@storybook/react-webpack5',
-  '@storybook/vue3-webpack5',
-  '@storybook/html-webpack5',
-  '@storybook/web-components-webpack5',
-];
-
-export const missingBabelRc: Fix<MissingBabelRcOptions> = {
-  id: 'missing-babelrc',
-
-  async check({ packageManager, mainConfig, storybookVersion }) {
-    const packageJson = await packageManager.retrievePackageJson();
-
-    if (!semver.gte(storybookVersion, '7.0.0')) {
-      return null;
-    }
-
-    const { addons } = mainConfig;
-
-    const hasCraPreset =
-      addons &&
-      addons.find((addon) =>
-        typeof addon === 'string'
-          ? addon.endsWith('@storybook/preset-create-react-app')
-          : addon.name.endsWith('@storybook/preset-create-react-app')
-      );
-
-    const frameworkPackageName = getFrameworkPackageName(mainConfig);
-
-    if (
-      frameworkPackageName &&
-      frameworksThatNeedBabelConfig.includes(frameworkPackageName) &&
-      !hasCraPreset
-    ) {
-      const config = await loadPartialConfigAsync({
-        babelrc: true,
-        filename: '__fake__.js', // somehow needed to detect .babelrc.* files
-      });
-
-      if (!config?.config && !config?.babelrc && !packageJson.babel) {
-        return { needsBabelRc: true };
-      }
-    }
-
-    return null;
-  },
-  prompt() {
-    return dedent`
-      We detected that your project does not have a babel configuration (.babelrc, babel.config.js, etc.).
-
-      In version 6.x, Storybook provided its own babel settings out of the box. Now, Storybook re-uses ${chalk.bold(
-        "your project's babel configuration"
-      )}, with small, incremental updates from Storybook addons.
-
-      If your project does not have a babel configuration file, we can generate one that's equivalent to the 6.x defaults for you. Keep in mind that this can affect your project if it uses babel, and you may need to make additional changes based on your projects needs.
-
-      We can create a ${chalk.blue(
-        '.babelrc.json'
-      )} file with some basic configuration and add any necessary package devDependencies.
-
-      ${chalk.bold(
-        'Note:'
-      )} After installing the necessary presets, if it does not work in a monorepo, see the babel documentation for reference:
-      ${chalk.yellow('https://babeljs.io/docs')}
-
-      Please see the migration guide for more information:
-      ${chalk.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively'
-      )}
-    `;
-  },
-  async run() {
-    logger.info();
-    await generateStorybookBabelConfigInCWD();
-  },
-};
--- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
@ -138,9 +138,6 @@ describe('new-frameworks fix', () => {
                },
              },
            },
-            reactOptions: {
-              fastRefresh: true,
-            },
          },
        })
      ).resolves.toEqual(
@ -149,9 +146,6 @@ describe('new-frameworks fix', () => {
          frameworkPackage: '@storybook/react-webpack5',
          dependenciesToAdd: ['@storybook/react-webpack5'],
          dependenciesToRemove: ['@storybook/builder-webpack5', '@storybook/manager-webpack5'],
-          frameworkOptions: {
-            fastRefresh: true,
-          },
          builderConfig: {
            name: 'webpack5',
            options: {
@ -517,7 +511,7 @@ describe('new-frameworks fix', () => {
        checkNewFrameworks({
          packageManager,
          main: {
-            framework: { name: '@storybook/react-webpack5', options: { fastRefresh: true } },
+            framework: { name: '@storybook/react-webpack5' },
            addons: [
              {
                name: 'storybook-addon-next',
@ -541,7 +535,6 @@ describe('new-frameworks fix', () => {
          dependenciesToRemove: ['@storybook/react-webpack5', 'storybook-addon-next'],
          addonsToRemove: ['storybook-addon-next'],
          frameworkOptions: {
-            fastRefresh: true,
            nextConfigPath: '../next.config.js',
          },
          builderInfo: {
--- a/code/lib/cli/src/babel-config.ts
+++ b/code/lib/cli/src/babel-config.ts
@ -1,108 +0,0 @@
-import { writeFile, pathExists } from 'fs-extra';
-import { logger } from '@storybook/node-logger';
-import path from 'path';
-import prompts from 'prompts';
-import { JsPackageManagerFactory } from './js-package-manager';
-
-export const generateStorybookBabelConfigInCWD = async () => {
-  const target = process.cwd();
-  return generateStorybookBabelConfig({ target });
-};
-
-export const getBabelPresets = ({ typescript, jsx }: { typescript: boolean; jsx: boolean }) => {
-  const dependencies = ['@babel/preset-env'];
-
-  if (typescript) {
-    dependencies.push('@babel/preset-typescript');
-  }
-
-  if (jsx) {
-    dependencies.push('@babel/preset-react');
-  }
-
-  return dependencies;
-};
-
-export const writeBabelConfigFile = async ({
-  location,
-  typescript,
-  jsx,
-}: {
-  location?: string;
-  typescript: boolean;
-  jsx: boolean;
-}) => {
-  const fileLocation = location || path.join(process.cwd(), '.babelrc.json');
-
-  const presets: (string | [string, any])[] = [
-    ['@babel/preset-env', { targets: { chrome: 100, safari: 15, firefox: 91 } }],
-  ];
-
-  if (typescript) {
-    presets.push('@babel/preset-typescript');
-  }
-
-  if (jsx) {
-    presets.push('@babel/preset-react');
-  }
-
-  const contents = JSON.stringify(
-    {
-      sourceType: 'unambiguous',
-      presets,
-      plugins: [],
-    },
-    null,
-    2
-  );
-
-  await writeFile(fileLocation, contents);
-};
-
-export const generateStorybookBabelConfig = async ({ target }: { target: string }) => {
-  logger.info(`Generating the Storybook default babel config at ${target}`);
-
-  const fileName = '.babelrc.json';
-  const location = path.join(target, fileName);
-
-  const exists = await pathExists(location);
-
-  if (exists) {
-    const { overwrite } = await prompts({
-      type: 'confirm',
-      initial: false,
-      name: 'overwrite',
-      message: `${fileName} already exists. Would you like overwrite it?`,
-    });
-
-    if (overwrite === false) {
-      logger.warn(`Cancelled, babel config file was NOT written to file-system.`);
-      return;
-    }
-  }
-
-  const { typescript, jsx } = await prompts([
-    {
-      type: 'confirm',
-      initial: false,
-      name: 'typescript',
-      message: `Do you want to add the TypeScript preset?`,
-    },
-    {
-      type: 'confirm',
-      initial: false,
-      name: 'jsx',
-      message: `Do you want to add the React preset?`,
-    },
-  ]);
-
-  const dependencies = getBabelPresets({ typescript, jsx });
-
-  logger.info(`Writing file to ${location}`);
-  await writeBabelConfigFile({ location, typescript, jsx });
-
-  const packageManager = JsPackageManagerFactory.getPackageManager();
-
-  logger.info(`Installing dependencies (${dependencies.join(', ')})`);
-  await packageManager.addDependencies({ installAsDevDependencies: true }, dependencies);
-};
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@ -16,7 +16,6 @@ import { upgrade, type UpgradeOptions } from './upgrade';
 import { sandbox } from './sandbox';
 import { link } from './link';
 import { automigrate } from './automigrate';
-import { generateStorybookBabelConfigInCWD } from './babel-config';
 import { dev } from './dev';
 import { build } from './build';
 import { parseList, getEnvConfig } from './utils';
@ -67,10 +66,6 @@ command('add <addon>')
  .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications')
  .action((addonName: string, options: any) => add(addonName, options));

-command('babelrc')
-  .description('generate the default storybook babel config into your current working directory')
-  .action(() => generateStorybookBabelConfigInCWD());
-
 command('upgrade')
  .description('Upgrade your Storybook packages to the latest')
  .option(
--- a/code/lib/cli/src/generators/ANGULAR/index.ts
+++ b/code/lib/cli/src/generators/ANGULAR/index.ts
@ -71,6 +71,7 @@ const generator: Generator<{ projectName: string }> = async (
      addScripts: false,
      componentsDestinationPath: root ? `${root}/src/stories` : undefined,
      storybookConfigFolder: storybookFolder,
+      webpackCompiler: () => undefined,
    },
    'angular'
  );
--- a/code/lib/cli/src/generators/EMBER/index.ts
+++ b/code/lib/cli/src/generators/EMBER/index.ts
@ -9,12 +9,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
    { ...options, builder: CoreBuilder.Webpack5 },
    'ember',
    {
-      extraPackages: [
-        // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
-        'babel-plugin-ember-modules-api-polyfill',
-        // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
-        'babel-plugin-htmlbars-inline-precompile',
-      ],
      staticDir: 'dist',
    },
    'ember'
--- a/code/lib/cli/src/generators/HTML/index.ts
+++ b/code/lib/cli/src/generators/HTML/index.ts
@ -4,7 +4,7 @@ import type { Generator } from '../types';

 const generator: Generator = async (packageManager, npmOptions, options) => {
  await baseGenerator(packageManager, npmOptions, options, 'html', {
-    useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
+    webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined),
  });
 };

--- a/code/lib/cli/src/generators/NEXTJS/index.ts
+++ b/code/lib/cli/src/generators/NEXTJS/index.ts
@ -16,6 +16,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
    {
      staticDir,
      extraAddons: ['@storybook/addon-onboarding'],
+      webpackCompiler: ({ builder }) => undefined,
    },
    'nextjs'
  );
--- a/code/lib/cli/src/generators/PREACT/index.ts
+++ b/code/lib/cli/src/generators/PREACT/index.ts
@ -4,7 +4,7 @@ import type { Generator } from '../types';

 const generator: Generator = async (packageManager, npmOptions, options) => {
  await baseGenerator(packageManager, npmOptions, options, 'preact', {
-    useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
+    webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined),
  });
 };

--- a/code/lib/cli/src/generators/REACT/index.ts
+++ b/code/lib/cli/src/generators/REACT/index.ts
@ -10,7 +10,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {

  await baseGenerator(packageManager, npmOptions, options, 'react', {
    extraPackages,
-    useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
+    webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined),
    extraAddons: ['@storybook/addon-onboarding'],
  });
 };
--- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts
+++ b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts
@ -59,11 +59,10 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
    { ...options, builder: CoreBuilder.Webpack5 },
    'react',
    {
-      useSWC: () => true,
+      webpackCompiler: () => undefined,
      extraAddons,
      extraPackages,
      staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined,
-      skipBabel: true,
      extraMain,
    }
  );
--- a/code/lib/cli/src/generators/SERVER/index.ts
+++ b/code/lib/cli/src/generators/SERVER/index.ts
@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
    { ...options, builder: CoreBuilder.Webpack5 },
    'server',
    {
-      useSWC: () => true,
+      webpackCompiler: () => 'swc',
      extensions: ['json', 'yaml', 'yml'],
    }
  );
--- a/code/lib/cli/src/generators/VUE3/index.ts
+++ b/code/lib/cli/src/generators/VUE3/index.ts
@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
        ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0']
        : [];
    },
-    useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
+    webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined),
  });
 };

--- a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts
+++ b/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts
@ -5,7 +5,7 @@ import type { Generator } from '../types';
 const generator: Generator = async (packageManager, npmOptions, options) => {
  return baseGenerator(packageManager, npmOptions, options, 'web-components', {
    extraPackages: ['lit'],
-    useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
+    webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined),
  });
 };

--- a/Show More
+++ b/Show More