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

[nareshbhatia]

Describe the bug Trying to integrate storybook@next with CRA and running into a runtime error

To Reproduce Please run 'npm run storybook' in my repo: https://github.com/nareshbhatia/cra-with-storybook. You will get this error and Storybook with crash. The commit history explains how the repo was built in 3 easy steps as recommended in the docs.

ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react' in '/Users/naresh/projects/cra-with-storybook/src/stories'
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/Compilation.js:2016:28
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/Users/naresh/projects/cra-with-storybook/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:270:22
    at eval (eval at create (/Users/naresh/projects/cra-with-storybook/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:434:22
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:116:11
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:670:25
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:975:5
    at /Users/naresh/projects/cra-with-storybook/node_modules/neo-async/async.js:6883:13
    at /Users/naresh/projects/cra-with-storybook/node_modules/webpack/lib/NormalModuleFactory.js:958:45
    at finishWithoutResolve (/Users/naresh/projects/cra-with-storybook/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /Users/naresh/projects/cra-with-storybook/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /Users/naresh/projects/cra-with-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/naresh/projects/cra-with-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
resolve '@mdx-js/react' in '/Users/naresh/projects/cra-with-storybook/src/stories'
  Parsed request is a module
  using description file: /Users/naresh/projects/cra-with-storybook/package.json (relative path: ./src/stories)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/naresh/projects/cra-with-storybook/src/stories/node_modules doesn't exist or is not a directory
      /Users/naresh/projects/cra-with-storybook/src/node_modules doesn't exist or is not a directory
      looking for modules in /Users/naresh/projects/cra-with-storybook/node_modules
        single file module
          using description file: /Users/naresh/projects/cra-with-storybook/package.json (relative path: ./node_modules/@mdx-js/react)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react.json doesn't exist
            .cjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react.cjs doesn't exist
        /Users/naresh/projects/cra-with-storybook/node_modules/@mdx-js/react doesn't exist
      /Users/naresh/projects/node_modules doesn't exist or is not a directory
      /Users/naresh/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

System Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 12.3.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.4.0 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: next => 6.5.0-beta.1
    @storybook/addon-essentials: next => 6.5.0-beta.1
    @storybook/addon-interactions: next => 6.5.0-beta.1
    @storybook/addon-links: next => 6.5.0-beta.1
    @storybook/builder-webpack5: next => 6.5.0-beta.1
    @storybook/manager-webpack5: next => 6.5.0-beta.1
    @storybook/react: next => 6.5.0-beta.1
    @storybook/testing-library: ^0.0.11 => 0.0.11

Additional context

Cross reference discussion here: https://github.com/storybookjs/storybook/pull/17215

[valentinpalkovic]

@nareshbhatia

I did some investigations and the issue is, that currently per default @mdx-js/[email protected] 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, @[email protected] and therefore @mdx-js/[email protected] (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?

[shilman]

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

[nareshbhatia]

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!

[jrolfs]

@shilman is it possible that what @nareshbhatia is seeing is a result of a missing curly: https://github.com/storybookjs/mdx2-csf/pull/1#discussion_r865392702?

[JohnAlbin]

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.

[samparhizkar]

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.

[webpro]

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"
    }
  }
}

[MichaelHeydon]

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

[jwright04]

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

[nareshbhatia]

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

[kojisaiki]

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

[MarceCandil]

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

Thanks nareshbhatia This worked for me.

[nareshbhatia]

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!

[BahmanBinary]

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"
    }
  }
}

[eric-burel]

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.

[cibernox]

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.

[TheDevelolper]

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.

My thoughts precisely. I'm trying to do this in vanilla TS. I want to learn storybook without Nx, React or Angular. I want to get a deeper understanding of it without frameworks hiding it from me.

[TheDevelolper]

Oh dear, now I have:

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

[rpearce]

@JohnAlbin's comment above resolved this for me in a react component project. If I only added @mdx-js/react, I'd get a blank page. Thanks!

[johngerome]

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/[email protected]

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

[mrmartineau]

FWIW I tried all the suggestions here and none worked except to install the latest v1x version of @mdx-js/react:

npm i -D @mdx-js/[email protected]

❯ npx sb info

Environment Info:

  System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.5.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.1 - ~/code/utopia/hub-ui/node_modules/.bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 94.0.1
    Safari: 15.6
  npmPackages:
    @storybook/addon-essentials: ^6.5.10 => 6.5.10
    @storybook/addon-info: ^5.3.21 => 5.3.21
    @storybook/addon-links: ^6.5.10 => 6.5.10
    @storybook/addons: ^6.5.10 => 6.5.10
    @storybook/react: ^6.5.10 => 6.5.10

I was also experiencing this issue (like this) when running the storybook script:

  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/zander/code/utopia/hub-ui/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/zander/code/utopia/hub-ui/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /Users/zander/code/utopia/hub-ui/node_modules/loader-runner/lib/LoaderRunner.js:205:4 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Which I resolved by adding

cross-env NODE_OPTIONS='--openssl-legacy-provider'

to my storybook script, like so:

  "scripts": {
    "storybook": "cross-env NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 6006",
  },

[marr]

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

1. npm i -D @mdx-js/[email protected]
2. Add the overrides to package.json.

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

3. run a clean install for maximum fun and profit. npm ci
4. commit and move on

[thany]

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

[embryCODE]

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

[tigrr]

I have a similar error coming from @storybook/manager-webpack4 in my web components library.

i ｢wdm｣: wait until bundle finished: 
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:417:16)    
    at handleParseError (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:471:10)
    at <path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:503:5
    at <path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:358:12
    at <path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\loader-runner\lib\LoaderRunner.js:214:10)     
    at Array.<anonymous> (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {       
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.9.0

[stefanlivens]

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.

[Sebastian-G]

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

[keyvanm]

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

[thany]

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.

[drunkenvalley]

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.