[Bug] Incopatibility with storybook-addon-next

What version of vite are you using?

vite v3.1.3

System info and storybook versions

System: OS: MacOS BigSur 11.7 CPU: 2.3 GHz Quad-Core Intel Core i7 Binaries: Node: 16.16.0 yarn: 1.22.15 Browsers: Chrome: 105.0.5195.125 npmPackages: “@storybook/addon-actions”: “6.5.12”, “@storybook/addon-essentials”: “6.5.12”, “@storybook/addon-links”: “6.5.12”, “@storybook/builder-vite”: “0.2.2”, “@storybook/react”: “6.5.12”, “storybook-addon-next”: “1.6.9”,

Describe the Bug

Using storybook-addon-next in combination with builder-vite produces an error once storybook server started.

Reproduce repo link. I’ve added instruction to start.

A warning message:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: 

Error message is somehow related with next-image-stub.js:

Uncaught TypeError: Invalid Version: undefined
    at new SemVer (semver.js:19:13)
    at compare (compare.js:3:3)
    at Object.gt (gt.js:2:29)
    at node_modules/storybook-addon-next/dist/images/next-image-stub.js (next-image-stub.js:7:22)
    at __require2 (chunk-S5KM4IGW.js?v=7ad206d8:18:50)
    at node_modules/storybook-addon-next/dist/preview.js (preview.js:7:1)
    at __require2 (chunk-S5KM4IGW.js?v=7ad206d8:18:50)
    at dep:storybook-addon-next_dist_preview__js:1:16

Steps to reproduce

• Clone repository
• yarn
• yarn storybook:start
• Once Vite bundled, go to http://localhost:6006/
• Inspect an error in console

Video

https://user-images.githubusercontent.com/15727958/192000642-f0bffba6-b551-4f5f-aaac-5830ac4ff5ad.mp4

Link to Minimal Reproducible Example

Branch bug: https://github.com/dvakatsiienko/next-vite-storybook/tree/bug

Participation

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

[dvakatsiienko]

I’ve created an issue for storybook-addon-next as well, RyanClementsHax/storybook-addon-next#120. @RyanClementsHax gave his comment from his side why it won’t work for now, so let’s wait I guess.

[IanVS]

Next.js isn’t officially supported by the storybook vite builder, for the reasons mentioned above. I think you’re best off sticking with the webpack builder when using next.js, to avoid different behaviors between your storybook and app.

If you’d like to speed things up a bit, you can try out storybook 7.0, which should be a good deal faster, even when using Webpack.