storybook: MDX2: Can't resolve '@mdx-js/react'

I tried the MDX2 work-around from https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#opt-in-mdx2-support, but I had to install @mdx-js/react v2 before it started to work.

Here’s the very-slightly modified instructions from the above url.

Opt-in MDX2 support

SB6.5 adds experimental opt-in support for MDXv2. To install:

npm install -D @storybook/mdx2-csf @mdx-js/react

Then add the previewMdx2 feature flag to your .storybook/main.js config:

module.exports = {
  features: {
    previewMdx2: true,
  },
};

Before I tried the work-around I got various errors (including the errors listed in this issue and from #18266) depending on what I tried (nothing worked). Storybook would either fail to build or build successfully but render blank pages instead of the MDX content.

And with the work-around, Storybook builds and renders MDX files.

@nareshbhatia

I did some investigations and the issue is, that currently per default @mdx-js/react@1.x.x version is used, which defines react in its peerDependency section (https://github.com/mdx-js/mdx/blob/v1.6.22/packages/react/package.json#L35). React 18 is not part of the allowed version range and therefore @mdx-js/react will not be hoisted to the root node_modules folder. Therefore it cannot be resolved by node atm.

As I have read the code and some issues, @mdx-js@2.x.x and therefore @mdx-js/react@2.x.x (which allows to use React 18) will be the default in Storybook 7. You can opt-in for mdx2 like described here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#opt-in-mdx2-support (which didn’t solve the issue for me).

As a workaround, you could install @mdx-js/react and ignore all peerDependency errors thrown by npm 7 by using the flag --legacy-peer-deps. This will install the dependency like npm 4 - npm 6 did it:

$ npm i @mdx-js/react@^1.6.22 -D --legacy-peer-deps

At least for me, this solved the issue. I don’t know, whether we can bypass this npm 7 exclusive issue until mdx-js@2 deps are used. @shilman any ideas?

This was annoying. Thanks @mrmartineau – you reminded me that pinning the version during install is required.

1. npm i -D @mdx-js/react@1.6.22
2. Add the overrides to package.json.

"overrides": {
    "@mdx-js/react": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
  },

1. run a clean install for maximum fun and profit. npm ci
2. commit and move on

I found a cleaner way to avoid overriding @mdx-js/react (and let it remain on 1.6.22). The main issue I found was that many dependencies were trying to load react v17 which was conflicting with CRA 5 wanting to load react v18. So my solution was to override react as shown below (note that it was also necessary to override react-refresh due to another problem):

{
  "overrides": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "0.13.0"
  }
}

I have 2 sample repos demonstrating this solution, one with preset-create-react-app and another without:

1. https://github.com/nareshbhatia/cra-with-storybook
2. https://github.com/nareshbhatia/cra-with-storybook-without-preset

Just to add a follow up here, I did try to use the latest suggestion here and use the mdx v2 preview. While the errors are gone now, the weird issue is that the mardown section of the docs does not have any font or theming for some reason. It’s as if you’re viewing a pure html document.

As of now I have resorted to installing mdx-js/react v1 via legacy-peer-deps but that’s kind of a band aid solution.

Can someone look into this further a bit ? I’m bootstraping a basic project with nx and receive all these problems when I create an mdx document.

Thanks @nareshbhatia , it works for me. I think this is more clean:

{
"overrides": {
    "@mdx-js/react": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
  }
}

npm i @mdx-js/react solved this issue for me storybook version: 6.5.9 node version: v18.3.0 npm version: 8.11.0 @mdx-js/react: 2.1.1

Thank you @valentinpalkovic & @shilman for helping with this.

For now the --legacy-peer-deps workaround works for me.

FYI, I tried the opt-in-mdx2-support as described in the migration link, but got the following runtime error:

ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Could not parse expression with acorn: Unterminated template
    at processResult (/Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/naresh/projects/cra-with-storybook/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/naresh/projects/cra-with-storybook/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/naresh/projects/cra-with-storybook/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/naresh/projects/cra-with-storybook/node_modules/@storybook/mdx2-csf/loader.js:26:12)

WARN Broken build, fix the error above.

Please feel free to close this issue if it is tracked elsewhere, or keep it open if this is the place to track it!

The only thing that worked for me was to explicitly add @mdx-js/react to the dependencies, but stay on v1 and override its dependency on React (to be installed without --legacy-peer-deps):

{
  "dependencies": {
    "react": "18.1.0",
  },
  "devDependencies": {
    "@mdx-js/react": "^1.6.22",
  },
  "overrides": {
    "@mdx-js/react": {
      "react": "$react"
    }
  }
}

I was getting this in a Vue project… I don’t know why. I had just installed Storybook as well. All I did was switch branches, go back to my storybook brach, did a npm i like a good boy, and ran into this error. So,

1. How is it possible to get this error after switching branches and/or an npm i without any other changes in between?
2. Why does it require a React package in a project build on Vue? There’s no React anywhere in my project.

I guess I can do a reinstall, but really this should not be possible…

This is also need with the latest release of Remix, see https://github.com/VulcanJS/eurodance-stack I will use this config:

{
"overrides": {
    "@mdx-js/react": {
      "react": "$react",
      "react-dom": "$react-dom"
    }
  }
}

This $ syntax will use the same version as your dependencies so it’s better for future updates.

For me just doing npm i -D @mdx-js/react did the job. Didn’t need to pin the version nor add overrides to package.json

Just throwing out one more tip. The same repo that was working for me on MacOS (see https://github.com/storybookjs/storybook/issues/18094#issuecomment-1159781896) did not work today on a Windows machine. The culprit was an older version of npm (I think it had npm 8.3.0). I upgraded to the latest npm (8.14.0) and the exact same repo started working just fine! Mind boggling!

For what it’s worth, I found I had to set legacy-peer-deps with npm. Absolutely nothing else here worked for me.

I.e. either using --legacy-peer-deps or creating .npmrc with legacy-peer-deps=true.

For me just doing npm i -D @mdx-js/react did the job. Didn’t need to pin the version nor add overrides to package.json

Should Storybook not install the depedencies it depends on by having them in its dependencies? I know it sounds kind of obvious, but you know, just putting it out there. Maybe this one was forgotten.

Please provide a real fix, for the temporary solution (@marr works for me https://github.com/storybookjs/storybook/issues/18094#issuecomment-1217135470).

Hi all, I had the same, or very similar when moving our setup (storybook 6.5.9 with vue2, webpack5-builder, mdx@1) to node16. As you might now, this node16 (and npm@8) is much stricter on peer-dependencies.

But I managed to have storybook 6.5.12 with vue2, webpack5-builder and mdx@1, in node16! I had to add these 3 devDependencies:

• “@mdx-js/react”: “^1.0.0”,
• “react-dom”: “16.14.0”,
• “react”: “16.14.0”

Hope this helps.

Yeah, I’m getting the above too. Vue project, failing due to a React dependency. Madness.

I added @mdx-js/react to my devDependencies which resolved the above mentioned error. However my .mdx files are now completely blank.

Same. I’m also getting export 'mdx' was not found in '@mdx-js/react'

Edit Need to add the overrides in package.json and install @mdx-js/react@1.6.22

"overrides": {
    "@mdx-js/react": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
  },

Oh dear, now I have:

Error: Cannot find module ‘react/package.json’ 🤦🏽‍♂️

I solved by adding @mdx-js/react as a dev dependency of my app. Not ideal because it’s not a react app, but it works. I’m sure that at some point someone will say “WTF? Why is this react thingy in our deps? I’ll remove it” and it will blow in his/her face.

@nareshbhatia your sample repo’s package.json perfectly works for me! Thank you!

@valentinpalkovic thanks for investigating this!

Can we figure out why MDX2 doesn’t solve the problem and potentially fix that? Then we could say “use MDX2 to get React18 support”. And use --legacy-peer-deps as a workaround if you’re not ready to upgrade.

@nareshbhatia does the --legacy-peer-deps workaround solve it for you?