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

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

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

[valentinpalkovic]

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