[Bug] Latest released version fails to build .mdx stories

[gvdp]

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:

Uncaught ReferenceError: mdx is not defined

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 then yarn storybook I get the error message that the incorrect react plugin is used:

ERR!  Error: 
ERR!           @storybook/builder-vite requires @vitejs/plugin-react to be installed when using @storybook/react.
ERR!           Please install it and start storybook again.

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:

Uncaught ReferenceError: mdx is not defined
    at page (Introduction.stories.mdx:227:15)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

I assume this has something to do with the latest release and the changes in #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

• I am willing to submit a pull request for this issue.

[IanVS]

This should be fixed by #556, there are just some details I need to work out regarding react not necessarily being present in all packages.

[IanVS]

Released in 0.4.1

[gvdp]

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: #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.

[IanVS]

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.

[flysubmarina]

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?

[gvdp]

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 ..

[IanVS]

@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.

[IanVS]

@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?

[gvdp]

@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

[IanVS]

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]

@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 🎉🎉🎉

[D-Thrane]

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