Repository: storybook
Issue: [Bug]: MDX2: Can't resolve '@mdx-js/react' for Web component
Labels: bug,needs triage

### Describe the bug


<img width="981" alt="image" src="https://user-images.githubusercontent.com/40885376/215772322-58d00897-97c9-4fdd-8c6a-93b1b94a78e7.png">

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

```shell
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_