MDX files fails to build in v6.5

[muratcorlu]

Describe the bug
After upgrading our Storybook from 6.4.22 to 6.5 we started to get this when I want to run storybook:

ERROR in ./docs/commit-rules.stories.mdx
Module not found: Error: Can't resolve '@mdx-js/react' in '/Users/muratcorlu/works/trendyol/grace/docs'

If I add I @mdx-js/react to my project dependencies, build passes. But I think I should not need to add @mdx-js/react to my dependencies.

To Reproduce

Sorry but npx sb@next repro command also failed in my local. For reproducing you can pull https://github.com/Trendyol/grace/tree/112-css-property-controls-in-storybook branch and run npm run storybook:dev

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/.npm/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Firefox: 100.0.1
    Safari: 15.5
  npmPackages:
    @storybook/addon-a11y: ^6.5.0 => 6.5.0 
    @storybook/addon-actions: ^6.5.0 => 6.5.0 
    @storybook/addon-essentials: ^6.5.0 => 6.5.0 
    @storybook/addon-links: ^6.5.0 => 6.5.0 
    @storybook/addon-storysource: ^6.5.0 => 6.5.0 
    @storybook/web-components: ^6.5.0 => 6.5.0 

[shilman]

I tried to reproduce with your repo but I ended up getting a different error. Any chance you can create a simpler reproduction for me to look at? See how to create a repro. We prioritize issues with reproductions over those without. Thank you! 🙏

[Tim-arts]

@shilman the command npx sb@next repro is not working (Error: command exited with code: 1: at repro (C:\Users\user\AppData\Local\npm-cache_npx\eebb2d3a7d26a7f1\node_modules@storybook\cli\dist\cjs\repro.js:172:11))

Basically, I cannot make a reproduction on my side no matter which framework I choose (React, Angular, ...)

[muratcorlu]

Now I tried again with npx sb upgrade and it's upgraded to v.6.5.3. This time I get another dependency error:

> start-storybook -p 1994

info @storybook/web-components v6.5.3
info 
info => Loading presets
WARN   Failed to load preset: "/Users/muratcorlu/works/trendyol/grace/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js"
ERR! Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - /Users/muratcorlu/works/trendyol/grace/node_modules/@storybook/ui/noop.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at resolveFileName (/Users/muratcorlu/works/trendyol/grace/node_modules/resolve-from/index.js:29:39)
ERR!     at resolveFrom (/Users/muratcorlu/works/trendyol/grace/node_modules/resolve-from/index.js:43:9)
ERR!     at module.exports (/Users/muratcorlu/works/trendyol/grace/node_modules/resolve-from/index.js:46:47)
ERR!     at Object.<anonymous> (/Users/muratcorlu/works/trendyol/grace/node_modules/@storybook/ui/paths.js:17:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1105:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!  Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - /Users/muratcorlu/works/trendyol/grace/node_modules/@storybook/ui/noop.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at resolveFileName (/Users/muratcorlu/works/trendyol/grace/node_modules/resolve-from/index.js:29:39)
ERR!     at resolveFrom (/Users/muratcorlu/works/trendyol/grace/node_modules/resolve-from/index.js:43:9)
ERR!     at module.exports (/Users/muratcorlu/works/trendyol/grace/node_modules/resolve-from/index.js:46:47)
ERR!     at Object.<anonymous> (/Users/muratcorlu/works/trendyol/grace/node_modules/@storybook/ui/paths.js:17:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1105:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/Users/muratcorlu/works/trendyol/grace/node_modules/@storybook/ui/noop.js'
ERR!   ]
ERR! }

System Info:

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/.npm/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Safari: 15.5
  npmPackages:
    @storybook/addon-a11y: ^6.5.3 => 6.5.3 
    @storybook/addon-actions: ^6.5.3 => 6.5.3 
    @storybook/addon-essentials: ^6.5.3 => 6.5.3 
    @storybook/addon-links: ^6.5.3 => 6.5.3 
    @storybook/addon-storysource: ^6.5.3 => 6.5.3 
    @storybook/web-components: ^6.5.3 => 6.5.3 

This time I could manage to run npx sb@next repro (I noticed that I should not run in my project root path). I picked web_component_typescript template but it worked without any issues. Project structure, example component codes etc are very different from my project, to be honest.

I just pushed my branch to https://github.com/Trendyol/grace/tree/112-css-property-controls-in-storybook if it helps.

BTW, I tried cleaning node_modules folder and running npm i again, didn't help.

[shilman]

@muratcorlu that's the same error I got. I ran the whole thing with yarn and it worked. I'm not sure the best way to debug this, but if you had a simpler project that would certainly help.

[muratcorlu]

Oh, I tried yarn and it worked for me too. Can it be related to npm v8? I think package-lock.json file structure is changed in node v16. I'll try with Node 14

[muratcorlu]

I switched to Node 14.19.3 and npm 6.14.17, and I managed to run storybook v6.5.3 in my project without any issue. I can confirm this problem occurs on Node v14 and npm v8.

[muratcorlu]

When I switch back to Node v16, make a clean install without removing package-lock.json, it also worked. But if I clean package-lock.json file together with node_modules folder in Node v16, then make an install, I get first mdx dependency error again. Something really weird happens with peer dependencies with a clean install in Node v16, I think. I see 2 lines of warnings when I run npm i btw:

$ npm i
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
(##################) ⠇ reify:typescript: timing reifyNode:node_modules/web-component-analyzer/node_modules/typescript Completed in 7152ms
> @trendyol-js/grace@1.0.39 prepare
> husky install

husky - Git hooks installedy: timing reify:save Completed in 171ms

added 2149 packages, and audited 2150 packages in 34s

283 packages are looking for funding
  run `npm fund` for details

26 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

[shilman]

Closing as duplicate to #18094