Merge pull request #25925 from storybookjs/jeppe/deduplicate-addon-do…

…cs-packages

Addon-docs: Fix MDX components not being applied in Vite and theming loading twice

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"
   },

code/addons/docs/src/preset.ts

@@ -138,24 +138,26 @@ 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 reactAliasPlugin = {
-    name: 'storybook:react-alias',
+  const packageDeduplicationPlugin = {
+    name: 'storybook:package-deduplication',
     enforce: 'pre',
     config: () => ({
       resolve: {
         alias: {
           react,
           'react-dom': reactDom,
+          '@mdx-js/react': mdx,
         },
+        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;