Closed nareshbhatia closed 1 year ago
@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?
@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?
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!
@shilman is it possible that what @nareshbhatia is seeing is a result of a missing curly: https://github.com/storybookjs/mdx2-csf/pull/1#discussion_r865392702?
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.
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.
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"
}
}
}
I added @mdx-js/react
to my devDependencies
which resolved the above mentioned error. However my .mdx
files are now completely blank.
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
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:
@nareshbhatia your sample repo's package.json
perfectly works for me! Thank you!
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 overridereact-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:
Thanks nareshbhatia This worked for me.
Just throwing out one more tip. The same repo that was working for me on MacOS (see https://github.com/storybookjs/storybook/issues/18094#issuecomment-1159781896) did not work today on a Windows machine. The culprit was an older version of npm (I think it had npm 8.3.0). I upgraded to the latest npm (8.14.0) and the exact same repo started working just fine! Mind boggling!
Thanks @nareshbhatia , it works for me. I think this is more clean:
{
"overrides": {
"@mdx-js/react": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
}
This is also need with the latest release of Remix, see https://github.com/VulcanJS/eurodance-stack I will use this config:
{
"overrides": {
"@mdx-js/react": {
"react": "$react",
"react-dom": "$react-dom"
}
}
}
This $ syntax will use the same version as your dependencies so it's better for future updates.
I solved by adding @mdx-js/react
as a dev dependency of my app. Not ideal because it's not a react app, but it works. I'm sure that at some point someone will say "WTF? Why is this react thingy in our deps? I'll remove it" and it will blow in his/her face.
I solved by adding
@mdx-js/react
as a dev dependency of my app. Not ideal because it's not a react app, but it works. I'm sure that at some point someone will say "WTF? Why is this react thingy in our deps? I'll remove it" and it will blow in his/her face.
My thoughts precisely. I'm trying to do this in vanilla TS. I want to learn storybook without Nx, React or Angular. I want to get a deeper understanding of it without frameworks hiding it from me.
Oh dear, now I have:
Error: Cannot find module 'react/package.json' 🤦🏽♂️
@JohnAlbin's comment above resolved this for me in a react component project. If I only added @mdx-js/react
, I'd get a blank page. Thanks!
I added
@mdx-js/react
to mydevDependencies
which resolved the above mentioned error. However my.mdx
files are now completely blank.
Same.
I'm also getting
export 'mdx' was not found in '@mdx-js/react'
Edit Need to add the overrides in package.json and install @mdx-js/react@1.6.22
"overrides": {
"@mdx-js/react": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
FWIW I tried all the suggestions here and none worked except to install the latest v1x version of @mdx-js/react
:
npm i -D @mdx-js/react@1.6.22
❯ npx sb info
Environment Info:
System:
OS: macOS 12.5
CPU: (10) arm64 Apple M1 Max
Binaries:
Node: 18.5.0 - /usr/local/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.15.1 - ~/code/utopia/hub-ui/node_modules/.bin/npm
Browsers:
Chrome: 104.0.5112.79
Firefox: 94.0.1
Safari: 15.6
npmPackages:
@storybook/addon-essentials: ^6.5.10 => 6.5.10
@storybook/addon-info: ^5.3.21 => 5.3.21
@storybook/addon-links: ^6.5.10 => 6.5.10
@storybook/addons: ^6.5.10 => 6.5.10
@storybook/react: ^6.5.10 => 6.5.10
I was also experiencing this issue (like this) when running the storybook
script:
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:133:10)
at module.exports (/Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/zander/code/utopia/hub-ui/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/zander/code/utopia/hub-ui/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/zander/code/utopia/hub-ui/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at /Users/zander/code/utopia/hub-ui/node_modules/loader-runner/lib/LoaderRunner.js:205:4 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Which I resolved by adding
cross-env NODE_OPTIONS='--openssl-legacy-provider'
to my storybook script, like so:
"scripts": {
"storybook": "cross-env NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 6006",
},
This was annoying. Thanks @mrmartineau -- you reminded me that pinning the version during install is required.
npm i -D @mdx-js/react@1.6.22
"overrides": {
"@mdx-js/react": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
npm ci
I was getting this in a Vue project... I don't know why. I had just installed Storybook as well. All I did was switch branches, go back to my storybook brach, did a npm i
like a good boy, and ran into this error. So,
npm i
without any other changes in between?I guess I can do a reinstall, but really this should not be possible...
Yeah, I'm getting the above too. Vue project, failing due to a React dependency. Madness.
I have a similar error coming from @storybook/manager-webpack4
in my web components library.
i 「wdm」: wait until bundle finished:
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:471:10)
at <path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:503:5
at <path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\webpack\lib\NormalModule.js:358:12
at <path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (<path-to-project>\node_modules\@storybook\manager-webpack4\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.9.0
Hi all, I had the same, or very similar when moving our setup (storybook 6.5.9 with vue2, webpack5-builder, mdx@1) to node16. As you might now, this node16 (and npm@8) is much stricter on peer-dependencies.
But I managed to have storybook 6.5.12 with vue2, webpack5-builder and mdx@1, in node16! I had to add these 3 devDependencies:
Hope this helps.
Please provide a real fix, for the temporary solution (@marr works for me https://github.com/storybookjs/storybook/issues/18094#issuecomment-1217135470).
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
For me just doing
npm i -D @mdx-js/react
did the job. Didn't need to pin the version nor addoverrides
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.
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
.
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).
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 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: react@18.2.0 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/react@1.6.22 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
Closing this as fixed in the latest prerelease:
npx storybook@next upgrade --prerelease
Thanks @shilman, is there an ETA when the prerelease goes out as a tested release?
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
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
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.
System Please paste the results of
npx sb@next info
here.Additional context
Cross reference discussion here: https://github.com/storybookjs/storybook/pull/17215