builder-vite: @mdx-js_react.js does not provide an export named 'mdx' [Bug]

What version of `vite` are you using?

2.9.9

System info and storybook versions

Environment Info:

System: OS: macOS High Sierra 10.13.6 CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Binaries: Node: 16.14.2 - /usr/local/bin/node Yarn: 3.2.0 - /usr/local/bin/yarn npm: 8.6.0 - /usr/local/bin/npm Browsers: Chrome: 101.0.4951.64 Edge: 101.0.1210.53 Firefox: 97.0.1 Safari: 13.1.2 NPM Packages

“dependencies”: { “vue”: “^3.2.25” }, “devDependencies”: { “@babel/core”: “^7.18.2”, “@mdx-js/react”: “^2.1.1”, “@storybook/addon-actions”: “^6.5.6”, “@storybook/addon-essentials”: “^6.5.6”, “@storybook/addon-interactions”: “^6.5.6”, “@storybook/addon-links”: “^6.5.6”, “@storybook/addon-postcss”: “^2.0.0”, “@storybook/builder-vite”: “^0.1.35”, “@storybook/testing-library”: “^0.0.11”, “@storybook/vue3”: “^6.5.6”, “@tailwindcss/forms”: “^0.5.2”, “@vitejs/plugin-vue”: “^2.3.3”, “autoprefixer”: “^10.4.7”, “babel-loader”: “^8.2.5”, “postcss”: “^8.4.14”, “tailwindcss”: “^3.0.24”, “vite”: “^2.9.9”, “vue-loader”: “^16.8.3” }

Describe the Bug

MDX files throw the following error in Storybook:

SyntaxError: The requested module '/node_modules/.vite-storybook/deps/@mdx-js_react.js?v=4345b16f' does not provide an export named 'mdx'

I am using Storybook inside an NPM workspace / Monorepo. If I install Storybook into a fresh project (outside the monorepo) I do not have this issue.

Any ideas?

Link to Minimal Reproducible Example

No response

Participation

I am willing to submit a pull request for this issue.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 18 (7 by maintainers)

Commits related to this issue

Support MDXv2 (#377) Fixes https://github.com/storybookjs/builder-vite/issues/234 Fixes https://github.com/storybookjs/builder-vite/issues/391 Fixes https://github.com/storybookjs/builder-vite/iss... — committed to storybookjs/builder-vite by joshwooding 2 years ago

Most upvoted comments

Interesting. I think you can work around this for now with npm i --save-dev @mdx-js/react@1 --force.

IanVS on May 31, 2022

Sorry to reopen this issue but I’m getting this error and I’m using react v17 in my pnpm monorepo… I can’t get mdx to work with storybook…

hsheikhali1 on Jul 4, 2022

Hi @IanVS - Thanks for addressing this! Other than as a dependency of Storybook(?) I’m not using React anywhere. Everything I build is in Vue3.

adamSneller on May 31, 2022

Well, that got rid of the error message! But now when I load Introduction.stories.mdx I just get a blank page.

When I check the console, I see these errors:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

VM692 chunk-B4F5F2LW.js:13389 The above error occurred in the 
<MDXCreateElement> component:

at http://localhost:6006/node_modules/.vite-storybook/deps/@mdx-js_react.js?v=38219663:139:30
at MDXContent (http://localhost:6006/src/stories/Introduction.stories.mdx?import:17:3)
at AddContext2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-NSXUMJUF.js?v=38219663:1504:24)
at page
at div
at http://localhost:6006/node_modules/.vite-storybook/deps/chunk-EIWNNGFT.js?v=38219663:1816:45
at div
at http://localhost:6006/node_modules/.vite-storybook/deps/chunk-EIWNNGFT.js?v=38219663:1816:45
at MDXProvider2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-NSXUMJUF.js?v=38219663:252:46)
at ThemeProvider2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-EIWNNGFT.js?v=38219663:1863:44)
at SourceContainer2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-NSXUMJUF.js?v=38219663:991:23)
at DocsContainer2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-NSXUMJUF.js?v=38219663:1798:22)

adamSneller on May 31, 2022

It looks like you’ve got a mix of react 18 and react 17 in the project, due to different sub-packages wanting different versions. I think that perhaps, if you delete your package-lock.json, remove your node_modules, and re-install, you might be back in a working state. If that fails, you can always try running npm i --legacy-peer-deps.

Hopefully this is a temporary condition until we can get mdx straightened out.

IanVS on Jun 1, 2022

I’m also on React 18 w/vite, and I was able to get up and running with npm i --save-dev @mdx-js/react@1 --force (actually pnpm, in my case).

techpeace on Sep 2, 2022

Interesting. I think you can work around this for now with npm i --save-dev @mdx-js/react@1 --force.

@IanVS my hero! I’m in the middle of upgrading a React/Storybook/Vite project to React 18, ran into this exact issue where mdx stories wouldn’t load due to the error and your suggestion to install 1.x of mdx-js/react worked! Also this quote

That part is normal, it’s because react 17 is still used to generate the docs pages.

So glad I found this GH issue, because I was confused why I was still seeing that message in the console and thought the upgrade didn’t work 😇

SSTPIERRE2 on Aug 26, 2022

Wow, that did it! Thanks @IanVS - that’s fantastic!

adamSneller on Jun 3, 2022

@adamSneller sorry, that suggestion was for @l4dybird. I took a look at your reproduction (thanks for providing it), and I got it working by explicitly installing react@17. This shouldn’t have to be necessary, and hopefully you’ll be able to remove it once we get MDX all sorted out. I pushed up two commits to the main branch of your repo.

IanVS on Jun 3, 2022