search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.78k stars 9.34k forks source link

[Bug]: MDX2: Can't resolve '@mdx-js/react' for Web component #20858

Open sanketzad opened 1 year ago

sanketzad commented 1 year ago

Describe the bug

image

Hey, I updated the Storybook to the latest version @6.5.16. When I was trying to start the Storybook, I was getting errors as shown in the image.

package.json:

"devDependencies": { "@babel/core": "^7.20.12", "@babel/preset-react": "^7.18.6", "@storybook/addon-actions": "^6.5.16", "@storybook/addon-essentials": "^6.5.16", "@storybook/addon-links": "^6.5.16", "@storybook/builder-webpack4": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack4": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", "@storybook/web-components": "^6.5.16", "babel-loader": "9.1.2", "lit-html": "^2.6.1" },

I tried installing the package from the update to @6.5.16, below were the warnings:

ERESOLVE overriding peer dependency npm WARN While resolving: react-inspector@5.1.1 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN peerOptional react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/addon-actions@6.5.16 npm WARN node_modules/@storybook/addon-actions npm WARN dev @storybook/addon-actions@"^6.5.16" from the root project npm WARN 1 more (@storybook/addon-essentials) npm WARN 27 more (@storybook/addon-backgrounds, ...) npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1 npm WARN node_modules/@storybook/addon-actions/node_modules/react-inspector npm WARN react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.16 npm WARN node_modules/@storybook/addon-actions npm WARN npm WARN Conflicting peer dependency: react@17.0.2 npm WARN node_modules/react npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1 npm WARN node_modules/@storybook/addon-actions/node_modules/react-inspector npm WARN react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.16 npm WARN node_modules/@storybook/addon-actions npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @mdx-js/react@1.6.22 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN peerOptional react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/addon-actions@6.5.16 npm WARN node_modules/@storybook/addon-actions npm WARN dev @storybook/addon-actions@"^6.5.16" from the root project npm WARN 1 more (@storybook/addon-essentials) npm WARN 27 more (@storybook/addon-backgrounds, ...) npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22 npm WARN node_modules/@storybook/addon-docs/node_modules/@mdx-js/react npm WARN @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.16 npm WARN node_modules/@storybook/addon-docs npm WARN npm WARN Conflicting peer dependency: react@17.0.2 npm WARN node_modules/react npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22 npm WARN node_modules/@storybook/addon-docs/node_modules/@mdx-js/react npm WARN @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.16 npm WARN node_modules/@storybook/addon-docs

When tried starting Storybook local server, below is the error:

ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react' in '/Users/I575212/Documents/Workspace/components-storybook/stories' at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/Compilation.js:2016:28 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:798:13 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), :10:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:270:22 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:434:22 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:116:11 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:670:25 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:855:8 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:975:5 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/neo-async/async.js:6883:13 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/webpack/lib/NormalModuleFactory.js:958:45 at finishWithoutResolve (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:312:11) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:386:15 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/forEachBail.js:16:12 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/AliasPlugin.js:125:14 at next (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/forEachBail.js:14:3) at forEachBail (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/forEachBail.js:24:9) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/AliasPlugin.js:51:5 at _next0 (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :8:1) at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :30:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43 at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/Resolver.js:435:5 at eval (eval at create (/Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /Users/I575212/Documents/Workspace/components-storybook/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:41:15 at processTicksAndRejections (node:internal/process/task_queues:82:21) resolve '@mdx-js/react' in '/Users/I575212/Documents/Workspace/components-storybook/stories' Parsed request is a module using description file: /Users/I575212/Documents/Workspace/components-storybook/package.json (relative path: ./stories) Field 'browser' doesn't contain a valid alias configuration resolve as module

Can anyone help me by providing a solution for the above issue mentioned?

Thank you in advance.

To Reproduce

No response

System

System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 107.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16 
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/addon-links: ^6.5.16 => 6.5.16 
    @storybook/builder-webpack4: ^6.5.16 => 6.5.16 
    @storybook/builder-webpack5: ^6.5.16 => 6.5.16 
    @storybook/manager-webpack4: ^6.5.16 => 6.5.16 
    @storybook/manager-webpack5: ^6.5.16 => 6.5.16 
    @storybook/web-components: ^6.5.16 => 6.5.16

Additional context

No response

IanVS commented 1 year ago

I'd suggest removing one set of builder/managers, you've got both 4 and 5 installed. And did you try installing the package that it says is missing?

sanketzad commented 1 year ago

Hey @IanVS, as you suggested I removed the webpack5 packages but received the below error,

Error after removing webpack5 packages:

info => Loading custom manager config info Addon-docs: using MDX1 info => Using PostCSS preset with postcss@7.0.39 info => Using default Webpack4 setup info => Loading custom manager config 10% building 1/1 modules 0 active/Users/I575212/Documents/Workspace/components-storybook/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13 mainCompilation.fileSystemInfo.createSnapshot( ^

TypeError: Cannot read properties of undefined (reading 'createSnapshot') at /Users/I575212/Documents/Workspace/components-storybook/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36

Removed webpack4 and kept webpack5 packages:

Error: ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react'

Note: Removed node_modules and package-lock.json files.

Please suggest if there are any further fixes or solutions. Thank you in advance.

rajtersimon commented 1 year ago

Try adding "@mdx-js/react": "^1.6.22" to your devDependencies and:

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

to your package.json.

sanketzad commented 1 year ago

@rajtersimon thank you for your input. I did add "@mdx-js/react" in package.json explicitly. And tried to install using --legacy-peer-deps still, but I am getting the same error.

And for the "overrides" property, as I am not using react for the front end, I am not able to decide which version of react I should use there.