MDX2: Can't resolve '@mdx-js/react' #18094
Comments
|
I did some investigations and the issue is, that currently per default As I have read the code and some issues, As a workaround, you could install 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 @nareshbhatia does the |
|
Thank you @valentinpalkovic & @shilman for helping with this. For now the FYI, I tried the opt-in-mdx2-support as described in the migration link, but got the following runtime error: 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: storybookjs/mdx2-csf#1 (comment)? |
|
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 Here's the very-slightly modified instructions from the above url.
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. |
shilman
changed the title
shilman
changed the title
|
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 ?
|
|
The only thing that worked for me was to explicitly add {
"dependencies": {
"react": "18.1.0",
},
"devDependencies": {
"@mdx-js/react": "^1.6.22",
},
"overrides": {
"@mdx-js/react": {
"react": "$react"
}
}
} |
|
I added |
|
|
|
I found a cleaner way to avoid overriding {
"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 |
|
For me just doing |
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. |
Note: 2 extra things were added in package.json that shouldn't be necessary: * @mdx-js/react@1.6.22 dependency * overrides for the deps of @mdx-js/react This is to avoid a bug in this version of storybook: storybookjs/storybook#18094
|
For what it's worth, I found I had to set I.e. either using |
|
I originally experienced this issue with nx projects. And like everyone else had to use |
|
I am getting the same error after adding scss to the button component. |
====//====//==== To solve it I deleted node_modules and package-lock.json and install with this: |
|
Closing this as fixed in the latest prerelease: |
|
Thanks @shilman, is there an ETA when the prerelease goes out as a tested release? |
…ocumentation r=mstriemer,tgiles This patch both fixes the dependency issues that we were running into when writing `.stories.mdx` stories and gives us the ability to write `.stories.md` docs only vanilla markdown stories. To get the MDX stories working I had to clear out my `package-lock.json` and install `@mdx-js/react` with the `--legacy-peer-deps` flag as described here: storybookjs/storybook#18094 (comment) Let me know if you run into issues with installing dependencies and running Storybook given all the changes. There was a different solution I explored in January to enable MDX2 support, but I couldn't seem to resolve all the dependency version mismatch issues there anymore. There will probably be follow up work to update all of this after Storybook v7 is officially released in March. To enable us to write `.stories.md` docs only stories I added a custom Webpack loader that takes markdown and transforms it into docs only MDX, then runs that through all the other necessary loaders. There's definitely some follow up work here too - for example right now all our docs only pages get put in a "Docs" folder because I ran out of steam for exploring a way for us to specify/parse out a path and name for the docs stories. Differential Revision: https://phabricator.services.mozilla.com/D168268
…ocumentation r=mstriemer,tgiles This patch both fixes the dependency issues that we were running into when writing `.stories.mdx` stories and gives us the ability to write `.stories.md` docs only vanilla markdown stories. To get the MDX stories working I had to clear out my `package-lock.json` and install `@mdx-js/react` with the `--legacy-peer-deps` flag as described here: storybookjs/storybook#18094 (comment) Let me know if you run into issues with installing dependencies and running Storybook given all the changes. There was a different solution I explored in January to enable MDX2 support, but I couldn't seem to resolve all the dependency version mismatch issues there anymore. There will probably be follow up work to update all of this after Storybook v7 is officially released in March. To enable us to write `.stories.md` docs only stories I added a custom Webpack loader that takes markdown and transforms it into docs only MDX, then runs that through all the other necessary loaders. There's definitely some follow up work here too - for example right now all our docs only pages get put in a "Docs" folder because I ran out of steam for exploring a way for us to specify/parse out a path and name for the docs stories. Differential Revision: https://phabricator.services.mozilla.com/D168268
Tried that but now I get this |
This fixes and removing |
and others
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 infohere.Additional context
Cross reference discussion here: #17215
The text was updated successfully, but these errors were encountered: