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

adamSneller commented 2 years ago

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(R) Core(TM) 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

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

IanVS commented 2 years ago

This looks similar to https://github.com/storybookjs/builder-vite/issues/391. Are you using react 18, either in that package of your monorepo or another one in the monorepo?

adamSneller commented 2 years ago

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.

IanVS commented 2 years ago

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

adamSneller commented 2 years ago

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)

IanVS commented 2 years ago

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

Can you provide a reproduction that we can look into? Otherwise, it's difficult to help troubleshoot.

l4dybird commented 2 years ago

@IanVS hi. I have a similar problem. npm i --save-dev @ mdx-js / react @ 1 --force doesn't seem to fit.

repository https://github.com/l4dybird/vite-quasar-storybook

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: my-vue-app@0.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm ERR!   node_modules/@mdx-js/react
npm ERR!     dev @mdx-js/react@"1.6.22" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @storybook/addon-actions@"6.5.6" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.1.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.1.0" from react-dom@18.1.0
npm ERR!   node_modules/react-dom
npm ERR!     peerOptional react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/addon-actions@6.5.6
npm ERR!     node_modules/@storybook/addon-actions
npm ERR!       dev @storybook/addon-actions@"6.5.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\kyuuk\AppData\Local\npm-cache\eresolve-report.txt for a full report.       

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\kyuuk\AppData\Local\npm-cache\_logs\2022-06-01T14_31_56_018Z-debug-0.log

IanVS commented 2 years ago

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.

adamSneller commented 2 years ago

Hi @IanVS I just uploaded a reproducible example and added you as a collaborator. Please let me know if you do not receive the invite from Github. I hope this helps!

Thanks!

adamSneller commented 2 years ago

Okay, I just tested the suggested solution and can confirm that this does not solve the problem.

Steps to reproduce:

Delete node_modules and packages-lock.json.
Run npm i --legacy-peer-deps
Run Storybook and attempt to load any mdx file.

IanVS commented 2 years ago

@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.

adamSneller commented 2 years ago

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

hsheikhali1 commented 2 years ago

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...

SSTPIERRE2 commented 2 years ago

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 😇

techpeace commented 2 years ago

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).

IanVS commented 2 years ago

@techpeace the other thing you can try is to use mdx2, which actually is made for react 18. https://gist.github.com/shilman/6ff2d7e18db8846e8fc552fb432ae4f6. I wonder if that would also solve the issue for you.

techpeace commented 2 years ago

Thanks, @IanVS!

Running through those instructions, "@storybook/react": "^7.0.0-alpha.28" throws the following:

Package subpath './preset' is not defined by "exports" in [REDACTED]/@storybook/react/package.json

This may have something to do with my using pnpm (though that subpath is indeed not defined).

Not a huge deal, since I got it running with the 1.x branch, for the moment.

IanVS commented 2 years ago

You shouldn't need to use @storybook/react directly anymore, it's now @storybook/react-vite. If the migration didn't run, you can try npx sb@future automigrate, or follow the manual instructions in https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory

newtriks commented 2 years ago

You shouldn't need to use @storybook/react directly anymore, it's now @storybook/react-vite. If the migration didn't run, you can try npx sb@future automigrate, or follow the manual instructions in https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory

@IanVS if @storybook/react is removed as a dependency then Storybook crashes (when using pnpm - not sure if that's applicable) with the following error:

12:54:32 [vite] Internal server error: Failed to resolve import "@storybook/react/preview" from "../../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/vite-app.js
  5  |      import * as clientApi from "@storybook/client-api";
  6  |      import { logger } from '@storybook/client-logger';
  7  |      import * as config_0 from '@storybook/react/preview'
     |                                 ^
  8  |  import * as config_1 from '@storybook/addon-docs/preview'
  9  |  import * as config_2 from '@storybook/addon-actions/preview'

The only way I get get it to compile is to include @storybook/react and force @mdx-js/react to v1 (using React 17).

storybookjs / builder-vite