Open gvdp opened 1 year ago
This should be fixed by https://github.com/storybookjs/builder-vite/pull/556, there are just some details I need to work out regarding react
not necessarily being present in all packages.
Released in 0.4.1
Hi @IanVS , thanks for the quick fix! The stories now indeed render, but is still seems not entirely ok. I'm seeing some styles not being applied but that's already mentioned here: https://github.com/storybookjs/builder-vite/issues/561
Also seeing an error that React is not defined when I'm using a custom React component in the mdx story:
Uncaught ReferenceError: React is not defined
I've updated my branch in https://github.com/gvdp/builder-vite/tree/fixed-example-version/examples/react-18 with an example of what breaks in our Storybook. The story Introduction.stories.mdx
in there doesn't render.
Hi it looks like your branch might be a bit behind, I'd suggest updating it with the changes I released last night in 0.4.2, and please let me know if the react issue is fixed.
I do need to look into the styles, though.
Hi @IanVS! Thanks for this fix for .mdx files. In dev it works correctly, with small error about React version. But we are getting an error in published storybook. The .MDX story is default and comes with storybook
And full error message is: This Introduction story does not display at all. Can you tell us what is the potential cause of this? And maybe any suggestions to fix?
You're right I didn't look at the updated examples, my bad.
Updated the branch now though and initially it failed because the config.build
property doesn't exist on the config
object received from the viteFinal
hook:
ERR! TypeError: Cannot set properties of undefined (setting 'rollupOptions')
ERR! at Object.viteFinal (/builder-vite/examples/react-18/.storybook/main.cjs:18:32)
ERR! at /builder-vite/examples/react-18/node_modules/@storybook/core-common/dist/cjs/presets.js:294:28
then I changed it to use mergeConfig
like in some other examples but still getting the same error in the storybook itself ..
@flysubmarina that could potentially be caused by multiple versions of react being used on the page. You can try searching your node_modules for react
folders, ideally it should only exist once. But, since mdx1 uses react 17, if your project uses react 18 you might end up with two. I'm not sure I've got a great fix for that.
I might suggest trying out mdx2 in this case. You can follow this guide: https://gist.github.com/shilman/6ff2d7e18db8846e8fc552fb432ae4f6 (the --prerelease
flag is no longer needed). Please let me know if you do indeed have two react folders and whether mdx2 solves it. If not, We'll need to try to dig in deeper to figure out what's going on, and a reproduction would be really helpful in that situation.
@gvdp I'm not sure this is the best way to troubleshoot this, since this repo is a bit awkward with the use of yarn portals and whatnot. Are you still having problems in your main app when upgrading to version 0.4.2? If so, maybe you can create a new project similar to your own that reproduces the issue?
@IanVS yes still having the problem. I created a separate reproduction in a clean repo where I copied the react-18 example but only kept the failing story:
https://github.com/gvdp/reproduction-react-18-builder-issue
If you run yarn storybook
in there the "Introduction" story has the Uncaught ReferenceError: React is not defined
error
Thanks, I see what you mean. I'll try to look into it as soon as I can. If anyone else wants to help out that would also be appreciated, because I don't have a lot of time right now to devote to this.
@flysubmarina that could potentially be caused by multiple versions of react being used on the page. You can try searching your node_modules for
react
folders, ideally it should only exist once. But, since mdx1 uses react 17, if your project uses react 18 you might end up with two. I'm not sure I've got a great fix for that.I might suggest trying out mdx2 in this case. You can follow this guide: https://gist.github.com/shilman/6ff2d7e18db8846e8fc552fb432ae4f6 (the
--prerelease
flag is no longer needed). Please let me know if you do indeed have two react folders and whether mdx2 solves it. If not, We'll need to try to dig in deeper to figure out what's going on, and a reproduction would be really helpful in that situation.
Thanks a lot, it helped.Yes, I had several react packages. After migration to 7 Beta, I can confirm that MDX works in production.I 🎉🎉🎉
I am also having issues with latest Storybook and Vite. It would fail to render Configure.mdx complaining about a line in the css. Installed @mdx-js/react and now i get this.
Failed to fetch dynamically imported module: http://localhost:6006/src/stories/Configure.mdx TypeError: Failed to fetch dynamically imported module: http://localhost:6006/src/stories/Configure.mdx
What version of
vite
are you using?4.0.4
System info and storybook versions
System: OS: macOS 12.5.1 CPU: (10) arm64 Apple M1 Pro Binaries: Node: 16.15.0 - ~/.volta/tools/image/node/16.15.0/bin/node Yarn: 3.1.1 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn npm: 8.5.5 - ~/.volta/tools/image/node/16.15.0/bin/npm Browsers: Chrome: 109.0.5414.119 Firefox: 109.0 Safari: 15.6.1 npmPackages: @storybook/addon-a11y: ^6.5.9 => 6.5.16 @storybook/addon-docs: ^6.5.9 => 6.5.16 @storybook/addon-essentials: ^6.5.9 => 6.5.16 @storybook/builder-vite: 0.4.0 => 0.4.0 @storybook/react: ^6.5.9 => 6.5.16 @storybook/test-runner: 0.1.0 => 0.1.0
Describe the Bug
I upgraded my Storybook to
"@storybook/builder-vite": "0.4.0"
and noticed an error with with my Mdx stories:I tried to look at the example for react in the repo here but that also doesn't work for me. I reproduced the bug by forking this repo and using the npm released version
0.4.0
instead of the linked package.On the branch in my forked repo if I just run
yarn install
and thenyarn storybook
I get the error message that the incorrect react plugin is used:If I then change the
@vitejs/plugin-react-swc
dependency to just@vitejs/plugin-react
I can start the storybook, the "main" stories work fine but if I open the Introduction page I get the following error:I assume this has something to do with the latest release and the changes in https://github.com/storybookjs/builder-vite/pull/548 , but I don't know if maybe I've configured something wrong or if it's really a bug.
Link to Minimal Reproducible Example
https://github.com/gvdp/builder-vite/tree/fixed-example-version/examples/react-18
Participation