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

adamSneller · 2022-05-31T09:21:32Z

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

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

The text was updated successfully, but these errors were encountered:

IanVS · 2022-05-31T13:18:46Z

This looks similar to #391. Are you using react 18, either in that package of your monorepo or another one in the monorepo?

adamSneller · 2022-05-31T13:42:47Z

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 · 2022-05-31T14:05:32Z

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

adamSneller · 2022-05-31T19:23:35Z

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 · 2022-05-31T19:35:16Z

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 · 2022-06-01T15:13:47Z

@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 · 2022-06-01T15:32:52Z

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 · 2022-06-02T21:07:06Z

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 · 2022-06-02T21:21:14Z

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 · 2022-06-03T18:36:15Z

@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 · 2022-06-03T21:28:54Z

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

Fixes #234 Fixes #391 Fixes #398 To enable experimental MDX2 in a project, follow this guide: https://gist.github.com/shilman/6ff2d7e18db8846e8fc552fb432ae4f6 * Support MDXv2 * Fix formatting * Remove explicit mdx-js/preact from example * Remove workarounds from readme * Add @storybook/mdx2-csf to examples using it Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>

hsheikhali1 · 2022-07-04T13:23:47Z

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 · 2022-08-26T17:43:58Z

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 · 2022-09-02T12:20:10Z

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 · 2022-09-02T12:39:36Z

@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 · 2022-09-02T14:31:49Z

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 · 2022-09-02T14:58:44Z

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 · 2022-10-06T11:56:25Z

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

adamSneller added the bug Something isn't working label May 31, 2022

IanVS added the needs reproduction label May 31, 2022

joshwooding mentioned this issue Jun 11, 2022

vue3 can not use mdx @mdx-js_react.js does not provide an export named 'mdx' storybookjs/storybook#18451

Closed

IanVS mentioned this issue Jun 29, 2022

Support MDXv2 #377

Merged

IanVS closed this as completed in #377 Jun 29, 2022

nedkelly mentioned this issue Nov 24, 2022

Not fully compatible with Yarn PnP #141

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

adamSneller commented May 31, 2022 •

edited

Loading

IanVS commented May 31, 2022

adamSneller commented May 31, 2022

IanVS commented May 31, 2022

adamSneller commented May 31, 2022

IanVS commented May 31, 2022

l4dybird commented Jun 1, 2022

IanVS commented Jun 1, 2022

adamSneller commented Jun 2, 2022

adamSneller commented Jun 2, 2022

IanVS commented Jun 3, 2022

adamSneller commented Jun 3, 2022

hsheikhali1 commented Jul 4, 2022

SSTPIERRE2 commented Aug 26, 2022

techpeace commented Sep 2, 2022

IanVS commented Sep 2, 2022

techpeace commented Sep 2, 2022

IanVS commented Sep 2, 2022

newtriks commented Oct 6, 2022 •

edited

Loading

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

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

Comments

adamSneller commented May 31, 2022 • edited Loading

What version of vite are you using?

System info and storybook versions

Describe the Bug

Link to Minimal Reproducible Example

Participation

IanVS commented May 31, 2022

adamSneller commented May 31, 2022

IanVS commented May 31, 2022

adamSneller commented May 31, 2022

IanVS commented May 31, 2022

l4dybird commented Jun 1, 2022

IanVS commented Jun 1, 2022

adamSneller commented Jun 2, 2022

adamSneller commented Jun 2, 2022

IanVS commented Jun 3, 2022

adamSneller commented Jun 3, 2022

hsheikhali1 commented Jul 4, 2022

SSTPIERRE2 commented Aug 26, 2022

techpeace commented Sep 2, 2022

IanVS commented Sep 2, 2022

techpeace commented Sep 2, 2022

IanVS commented Sep 2, 2022

newtriks commented Oct 6, 2022 • edited Loading

adamSneller commented May 31, 2022 •

edited

Loading

What version of `vite` are you using?

newtriks commented Oct 6, 2022 •

edited

Loading