From e1a3a82feefb4a4c19bd3f4a210cc2d1bb79d6d0 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 7 Dec 2022 10:42:44 +0100
Subject: [PATCH] change the vite mdx plugin to use the mdxCompilerOptions from
 the preset, similar to how webpack does it now

---
 .../builder-vite/src/plugins/mdx-plugin.ts    | 20 +++++++++++++++----
 code/lib/builder-vite/src/vite-config.ts      |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/code/lib/builder-vite/src/plugins/mdx-plugin.ts b/code/lib/builder-vite/src/plugins/mdx-plugin.ts
index 30285c1b7048..2527921004fd 100644
--- a/code/lib/builder-vite/src/plugins/mdx-plugin.ts
+++ b/code/lib/builder-vite/src/plugins/mdx-plugin.ts
@@ -1,3 +1,4 @@
+import type { Options } from '@storybook/types';
 import type { Plugin } from 'vite';
 import { createFilter } from 'vite';
 
@@ -18,7 +19,7 @@ function injectRenderer(code: string) {
  *
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
  */
-export function mdxPlugin(): Plugin {
+export function mdxPlugin(options: Options): Plugin {
   let reactRefresh: Plugin | undefined;
   const include = /\.mdx?$/;
   const filter = createFilter(include);
@@ -41,12 +42,23 @@ export function mdxPlugin(): Plugin {
       reactRefresh = reactRefreshPlugins.find((p) => p.transform);
     },
 
-    async transform(src, id, options) {
+    async transform(src, id, transformOptions) {
       if (!filter(id)) return undefined;
 
       const { compile } = await import('@storybook/mdx2-csf');
 
-      const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));
+      const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
+        mdxCompileOptions: {
+          providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+        },
+      });
+
+      const mdxCode = String(
+        await compile(src, {
+          skipCsf: !isStorybookMdx(id),
+          ...mdxLoaderOptions,
+        })
+      );
 
       const modifiedCode = injectRenderer(mdxCode);
 
@@ -56,7 +68,7 @@ export function mdxPlugin(): Plugin {
 
       // It's safe to disable this, because we know it'll be there, since we added it ourselves.
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const result = await transform!.call(this, modifiedCode, `${id}.jsx`, options);
+      const result = await transform!.call(this, modifiedCode, `${id}.jsx`, transformOptions);
 
       if (!result) return modifiedCode;
 
diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts
index 464373b6f7cd..5917c6f0e3a0 100644
--- a/code/lib/builder-vite/src/vite-config.ts
+++ b/code/lib/builder-vite/src/vite-config.ts
@@ -75,7 +75,7 @@ export async function pluginConfig(options: ExtendedOptions) {
   const plugins = [
     codeGeneratorPlugin(options),
     // sourceLoaderPlugin(options),
-    mdxPlugin(),
+    mdxPlugin(options),
     injectExportOrderPlugin,
     stripStoryHMRBoundary(),
     {