Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addon-docs: Fix MDX components not applied in Vite and theme loading twice #25925

Merged
merged 2 commits into from
Feb 6, 2024
Merged

Addon-docs: Fix MDX components not applied in Vite and theme loading twice #25925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd38e1e
deduplicate react and storybook pacakges in addon-docs vite
JReinhold Jan 30, 2024
38205a1
alias @mdx-js/react in Vite
JReinhold Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions code/addons/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
},
Expand Down
10 changes: 6 additions & 4 deletions code/addons/docs/src/preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading