diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 5d5bfe1c1a6b..f53ae233d210 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..45c832b5fe42 100644 --- a/code/addons/docs/src/preset.ts +++ b/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;