From fd38e1ef8035bd61a3951e76bdc36c829fe9d26a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 30 Jan 2024 15:04:28 +0100
Subject: [PATCH 1/2] deduplicate react and storybook pacakges in addon-docs
 vite

---
 code/addons/docs/package.json  | 6 ++++--
 code/addons/docs/src/preset.ts | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 547571fed237..faff805e097a 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -112,8 +112,8 @@
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "fs-extra": "^11.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
@@ -122,6 +122,8 @@
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/test": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index ae79832240d1..c9f64366a03c 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -140,8 +140,8 @@ export const viteFinal = async (config: any, options: Options) => {
   // 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 } = await getResolvedReact(options);
 
-  const reactAliasPlugin = {
-    name: 'storybook:react-alias',
+  const packageDeduplicationPlugin = {
+    name: 'storybook:package-deduplication',
     enforce: 'pre',
     config: () => ({
       resolve: {
@@ -149,13 +149,14 @@ export const viteFinal = async (config: any, options: Options) => {
           react,
           'react-dom': reactDom,
         },
+        dedupe: ['@storybook/theming', '@storybook/components', '@storybook/blocks'],
       },
     }),
   };
 
   // add alias plugin early to ensure any other plugins that also add the aliases will override this
   // eg. the preact vite plugin adds its own aliases
-  plugins.unshift(reactAliasPlugin);
+  plugins.unshift(packageDeduplicationPlugin);
   plugins.push(mdxPlugin(options));
 
   return config;

From 38205a1c6a06c6cb3e2747c2c94a10acb5f52b1f Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 6 Feb 2024 13:51:05 +0100
Subject: [PATCH 2/2] alias @mdx-js/react in Vite

---
 code/addons/docs/src/preset.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index c9f64366a03c..45c832b5fe42 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -138,7 +138,7 @@ export const viteFinal = async (config: any, options: Options) => {
   const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
   // 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 } = await getResolvedReact(options);
+  const { react, reactDom, mdx } = await getResolvedReact(options);
 
   const packageDeduplicationPlugin = {
     name: 'storybook:package-deduplication',
@@ -148,6 +148,7 @@ export const viteFinal = async (config: any, options: Options) => {
         alias: {
           react,
           'react-dom': reactDom,
+          '@mdx-js/react': mdx,
         },
         dedupe: ['@storybook/theming', '@storybook/components', '@storybook/blocks'],
       },