diff --git a/MIGRATION.md b/MIGRATION.md
index ca14c266b621..385aeef95a56 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,7 @@
Migration
- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
+ - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
@@ -310,6 +311,10 @@
## From version 7.5.0 to 7.6.0
+#### typescript.skipBabel deprecated
+
+We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescirpt.skipCompiler` instead.
+
#### Primary doc block accepts of prop
The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all.
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index d60d943e53a8..3cea0d84fc7a 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -200,7 +200,8 @@ export default async (
}
}
- const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
+ const shouldCheckTs =
+ typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler;
const tsCheckOptions = typescriptOptions.checkOptions || {};
const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {};
diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts
index ce5796d0c222..f093cb6cc8b8 100644
--- a/code/frameworks/angular/src/preset.ts
+++ b/code/frameworks/angular/src/preset.ts
@@ -41,5 +41,6 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async (
return {
...config,
skipBabel: true,
+ skipCompiler: true,
};
};
diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts
index bf5b7d45ea5b..3030587afaaa 100644
--- a/code/frameworks/vue-vite/src/preset.ts
+++ b/code/frameworks/vue-vite/src/preset.ts
@@ -20,11 +20,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
};
};
-export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
- ...config,
- skipBabel: true,
-});
-
export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
return mergeConfig(config, {
plugins: [vueDocgen()],
diff --git a/code/frameworks/vue-webpack5/src/preset.ts b/code/frameworks/vue-webpack5/src/preset.ts
index 661053fddefb..1e493e9a7f99 100644
--- a/code/frameworks/vue-webpack5/src/preset.ts
+++ b/code/frameworks/vue-webpack5/src/preset.ts
@@ -25,4 +25,5 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
...config,
skipBabel: true,
+ skipCompiler: true,
});
diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts
index 0dd1e931ddd4..1714cc16075e 100644
--- a/code/frameworks/vue3-webpack5/src/preset.ts
+++ b/code/frameworks/vue3-webpack5/src/preset.ts
@@ -25,4 +25,5 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
...config,
skipBabel: true,
+ skipCompiler: true,
});
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index f5043c362d7c..2aace3e79d40 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -223,8 +223,16 @@ export interface TypescriptOptions {
* Disable parsing typescript files through babel.
*
* @default `false`
+ * @deprecated use `skipCompiler` instead
*/
skipBabel: boolean;
+
+ /**
+ * Disable parsing typescript files through compiler.
+ *
+ * @default `false`
+ */
+ skipCompiler: boolean;
}
export type Preset =
diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md
index 425f8703777a..89f11b1cbd5a 100644
--- a/docs/api/main-config-typescript.md
+++ b/docs/api/main-config-typescript.md
@@ -90,9 +90,11 @@ Only available for React Storybook projects. Options to pass to react-docgen-typ
## `skipBabel`
+Deprecated: Will be removed in Storybook 8.0. Use `skipCompiler` instead.
+
Type: `boolean`
-Disable parsing of TypeScript files through babel.
+Disable parsing of TypeScript files through Babel.
@@ -103,3 +105,19 @@ Disable parsing of TypeScript files through babel.
/>
+
+## `skipCompiler`
+
+Type: `boolean`
+
+Disable parsing of TypeScript files through the compiler, which is used for Webpack5.
+
+
+
+
+
+
diff --git a/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx
new file mode 100644
index 000000000000..85c216504c27
--- /dev/null
+++ b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+ framework: '@storybook/your-framework',
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ typescript: {
+ skipCompiler: true,
+ },
+};
+
+export default config;
+```