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

nareshbhatia · 2022-04-28T15:57:34Z

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: #17215

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

valentinpalkovic · 2022-04-29T05:12:57Z

@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 · 2022-04-29T10:07:45Z

@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 · 2022-04-29T16:18:58Z

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 · 2022-05-04T21:59:32Z

@shilman is it possible that what @nareshbhatia is seeing is a result of a missing curly: storybookjs/mdx2-csf#1 (comment)?

JohnAlbin · 2022-05-23T08:07:27Z

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 · 2022-06-12T15:41:16Z

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 · 2022-06-16T10:58:33Z

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 · 2022-06-16T22:20:53Z

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

jwright04 · 2022-06-18T02:10:04Z

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 · 2022-06-19T17:36:51Z

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:

keyvanm · 2022-10-25T18:42:52Z

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 · 2022-10-26T10:55:43Z

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.

Note: 2 extra things were added in package.json that shouldn't be necessary: * @mdx-js/[email protected] dependency * overrides for the deps of @mdx-js/react This is to avoid a bug in this version of storybook: storybookjs/storybook#18094

drunkenvalley · 2022-11-23T11:41:48Z

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.

samparhizkar · 2022-11-30T16:14:16Z

I originally experienced this issue with nx projects. And like everyone else had to use legacy-peer-deps=true in order to get going. But by updating both storybook and nx dependencies I exeperienced no issues yesterday (even without that legacy flag).

Natharam · 2022-12-04T19:07:22Z

I am getting the same error after adding scss to the button component.
ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react'

selfridges-joanna · 2022-12-08T09:19:36Z

I am getting the same error after adding scss to the button component.
ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react'

====//====//====
I have had the same error. What it happened was.. I cloned a branch from a repository. I used npm -I to install all dependencies. While I was trying to open it on local server, I got these:
npm ERR! While resolving: **@repository_name/folder** npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^18" from **@repository_name/folder@undefined** npm ERR! packages/repository_name npm ERR! @repository_name/folder@undefined** npm ERR! node_modules/@repository_name/folder** npm ERR! workspace packages/repository_name from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.13.1 || ^17.0.0" from @mdx-js/[email protected] npm ERR! node_modules/@mdx-js/react npm ERR! dev @mdx-js/react@"^1.6.22" from @repository_name/folder@undefined npm ERR! packages/repository_name npm ERR! @repository_name/folder@undefined npm ERR! node_modules/@repository_name/folder npm ERR! workspace packages/repository_name from the root project

To solve it I deleted node_modules and package-lock.json and install with this:
npm i @mdx-js/react@^1.6.22 -D --legacy-peer-deps

shilman · 2022-12-12T06:23:39Z

Closing this as fixed in the latest prerelease:

npx storybook@next upgrade --prerelease

binarykitchen · 2023-01-19T20:47:42Z

Thanks @shilman, is there an ETA when the prerelease goes out as a tested release?

See storybookjs/storybook#18094 (comment)

…ocumentation r=mstriemer,tgiles This patch both fixes the dependency issues that we were running into when writing `.stories.mdx` stories and gives us the ability to write `.stories.md` docs only vanilla markdown stories. To get the MDX stories working I had to clear out my `package-lock.json` and install `@mdx-js/react` with the `--legacy-peer-deps` flag as described here: storybookjs/storybook#18094 (comment) Let me know if you run into issues with installing dependencies and running Storybook given all the changes. There was a different solution I explored in January to enable MDX2 support, but I couldn't seem to resolve all the dependency version mismatch issues there anymore. There will probably be follow up work to update all of this after Storybook v7 is officially released in March. To enable us to write `.stories.md` docs only stories I added a custom Webpack loader that takes markdown and transforms it into docs only MDX, then runs that through all the other necessary loaders. There's definitely some follow up work here too - for example right now all our docs only pages get put in a "Docs" folder because I ran out of steam for exploring a way for us to specify/parse out a path and name for the docs stories. Differential Revision: https://phabricator.services.mozilla.com/D168268

robiXxu · 2023-02-27T07:11:18Z

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

Tried that but now I get this

_mdx_js_react__WEBPACK_IMPORTED_MODULE_10__.mdx is not a function

robiXxu · 2023-02-27T07:31:33Z

Closing this as fixed in the latest prerelease:
npx storybook@next upgrade --prerelease

This fixes @mdx-js/react issue, now i have another one related to staticDir.
Managed to fix that too by adding the following in .storybook/main.js

staticDir: ['../public'],

and removing -s flag from both storybook & build-storybook scripts in package.json

nareshbhatia added bug needs triage labels Apr 28, 2022

nareshbhatia mentioned this issue Apr 28, 2022

React: Add support for react18's new root API #17215

Merged

3 tasks

shilman added this to the 6.5 release milestone Apr 28, 2022

shilman added react mdx linear and removed needs triage labels Apr 28, 2022

shilman added the has workaround label Apr 29, 2022

shilman modified the milestones: 6.5 release, 6.5 stabilization May 20, 2022

shilman mentioned this issue May 23, 2022

MDX files fails to build in v6.5 #18266

Closed

shilman changed the title ~~React 18 support in Storybook 6.5.x beta is broken~~ Can't resolve '@mdx-js/react' May 23, 2022

shilman changed the title ~~Can't resolve '@mdx-js/react'~~ MDX2: Can't resolve '@mdx-js/react' May 23, 2022

shilman mentioned this issue May 24, 2022

Fix @mdx-js/react dependency storybookjs/mdx1-csf#5

Merged

inhibitor1217 mentioned this issue May 25, 2022

Upgrade dependencies to support React v18 as peer dependency channel-io/bezier-react#799

Merged

7 tasks

danspratling mentioned this issue May 31, 2022

[Feature Request] Support mdx storybookjs/test-runner#36

Closed

bespoyasov mentioned this issue Jun 3, 2022

Refresh packages bespoyasov/www#69

Closed

5 tasks

shilman added linear and removed linear labels Jun 7, 2022

shilman moved this to In Review in MDX2 Oct 15, 2022

shilman moved this from In Review to In Progress in MDX2 Oct 15, 2022

shilman self-assigned this Oct 15, 2022

xgqfrms mentioned this issue Oct 27, 2022

npm ci & package-lock.json error xgqfrms/Gatsby-Tutorials-All-In-One#5

Open

TrevorKarjanis mentioned this issue Nov 9, 2022

@mdx-js/react fails to install ni/nimble#806

Closed

nataliepina mentioned this issue Nov 10, 2022

Dependency Updates and MDX2 support d2iq/ui-kit#876

Merged

4 tasks

jonniebigodes mentioned this issue Nov 11, 2022

vue tutorial fail to start chromaui/learnstorybook.com#650

Closed

akdetrick mentioned this issue Nov 23, 2022

[dependencies] Add support for React 18 narmi/design_system#845

Closed

seiya-bach mentioned this issue Dec 8, 2022

Textコンポーネント追加、storybookに不具合があったため対応 seiya-bach/poke-type#11

Merged

Qs-F mentioned this issue Dec 9, 2022

fix: MDXで書かれたStorybookが崩れていたのを修正 4-design/for-ui#921

Merged

shilman closed this as completed Dec 12, 2022

Repository owner moved this from In Progress to Done in MDX2 Dec 12, 2022

rajsite added a commit to ni/nimble that referenced this issue Jan 27, 2023

Switch to mdx2 and add mdx-js/react workaround

f26cd0a

See storybookjs/storybook#18094 (comment)

harishv7 mentioned this issue Mar 27, 2023

Feat: Upgrade major deps and to Webpack 5 isomerpages/isomercms-frontend#1202

Merged

5 tasks

pvieiraguimaraes mentioned this issue Mar 31, 2023

React 18 Upgrade + Dependencies related codelittinc/agnostic-design-system#522

Open

crispika mentioned this issue Jan 23, 2024

[Bug]: Storybook doesn't recover after fixing syntax error in stories file #24155

Open

Manukyanq mentioned this issue May 19, 2024

fix: storybook mdx files Clariity/react-chessboard#139

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nareshbhatia commented Apr 28, 2022

valentinpalkovic commented Apr 29, 2022 •

edited

Loading

shilman commented Apr 29, 2022

nareshbhatia commented Apr 29, 2022

jrolfs commented May 4, 2022

JohnAlbin commented May 23, 2022

Opt-in MDX2 support

samparhizkar commented Jun 12, 2022 •

edited

Loading

webpro commented Jun 16, 2022

MichaelHeydon commented Jun 16, 2022

jwright04 commented Jun 18, 2022

nareshbhatia commented Jun 19, 2022

keyvanm commented Oct 25, 2022

thany commented Oct 26, 2022

drunkenvalley commented Nov 23, 2022

samparhizkar commented Nov 30, 2022 •

edited

Loading

Natharam commented Dec 4, 2022

selfridges-joanna commented Dec 8, 2022

shilman commented Dec 12, 2022

binarykitchen commented Jan 19, 2023

robiXxu commented Feb 27, 2023 •

edited

Loading

robiXxu commented Feb 27, 2023

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

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

Comments

nareshbhatia commented Apr 28, 2022

valentinpalkovic commented Apr 29, 2022 • edited Loading

shilman commented Apr 29, 2022

nareshbhatia commented Apr 29, 2022

jrolfs commented May 4, 2022

JohnAlbin commented May 23, 2022

Opt-in MDX2 support

samparhizkar commented Jun 12, 2022 • edited Loading

webpro commented Jun 16, 2022

MichaelHeydon commented Jun 16, 2022

jwright04 commented Jun 18, 2022

nareshbhatia commented Jun 19, 2022

keyvanm commented Oct 25, 2022

thany commented Oct 26, 2022

drunkenvalley commented Nov 23, 2022

samparhizkar commented Nov 30, 2022 • edited Loading

Natharam commented Dec 4, 2022

selfridges-joanna commented Dec 8, 2022

shilman commented Dec 12, 2022

binarykitchen commented Jan 19, 2023

robiXxu commented Feb 27, 2023 • edited Loading

robiXxu commented Feb 27, 2023

valentinpalkovic commented Apr 29, 2022 •

edited

Loading

samparhizkar commented Jun 12, 2022 •

edited

Loading

samparhizkar commented Nov 30, 2022 •

edited

Loading

robiXxu commented Feb 27, 2023 •

edited

Loading