Addon Docs: Dynamically import rehype

code/addons/docs/src/plugins/mdx-plugin.ts

@@ -3,8 +3,6 @@ import { dirname, join } from 'node:path';
 import type { Options } from 'storybook/internal/types';
 
 import { createFilter } from '@rollup/pluginutils';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSlug from 'rehype-slug';
 import type { Plugin } from 'vite';
 
 import type { CompileOptions } from '../compiler';
@@ -24,6 +22,9 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
   const presetOptions = await presets.apply<Record<string, any>>('options', {});
   const mdxPluginOptions = presetOptions?.mdxPluginOptions as CompileOptions;
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   return {
     name: 'storybook:mdx-plugin',
     enforce: 'pre',

code/addons/docs/src/preset.ts

@@ -5,9 +5,6 @@ import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/ty
 
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSlug from 'rehype-slug';
-
 import type { CompileOptions } from './compiler';
 
 /**
@@ -42,6 +39,9 @@ async function webpack(
 
   const { csfPluginOptions = {}, mdxPluginOptions = {} } = options;
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
     ...mdxPluginOptions,
     mdxCompileOptions: {
@@ -175,6 +175,9 @@ export const viteFinal = async (config: any, options: Options) => {
   const { plugins = [] } = config;
   const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
   const { react, reactDom, mdx } = await getResolvedReact(options);