From fd7f82f1f620ba07de603f2135420cfcf451a2ba Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Tue, 5 Nov 2024 11:13:02 +0100
Subject: [PATCH] Addon Docs: Dynamically import rehype

---
 code/addons/docs/src/plugins/mdx-plugin.ts | 5 +++--
 code/addons/docs/src/preset.ts             | 9 ++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts
index 40d8e88c3f3a..36fe3b691e97 100644
--- a/code/addons/docs/src/plugins/mdx-plugin.ts
+++ b/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',
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index e418b5e2e8aa..9cff707e8472 100644
--- a/code/addons/docs/src/preset.ts
+++ b/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);