[Bug]: v7, builder-vite not working.

[hwookim]

Describe the bug

I apologize in advance if my words sound strange as I'm using a translator.

I made a project with yarn create vite and did an npx storybook init, but there was a problem. It doesn't work because there's no command.

I downgraded the Storybook packages to version 6.5.16, but kept builder-vite at version 7.0.2. However, now I'm getting errors like the one below. The command works, but the execution doesn't.

So this time, I tried downgrading builder-vite to version 0.4.2.

I finally got Storybook to run, but it's not displaying anything due to an error. I'm not sure if it's a problem with vite or not. I'm a bit confused.

To Reproduce

https://github.com/hwookim/storybook-with-vite

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.18.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16 
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/addon-interactions: ^6.5.16 => 6.5.16 
    @storybook/addon-links: ^6.5.16 => 6.5.16 
    @storybook/builder-vite: ^0.4.2 => 0.4.2 
    @storybook/react: ^6.5.16 => 6.5.16 
    @storybook/testing-library: ^0.1.0 => 0.1.0 

Additional context

Interestingly, when I tested it on another repository I was working on, it worked! If possible, please take a look here as well. I'm not sure what the difference is. https://github.com/hwookim/wil/tree/storybook This is a monorepo consisting of lerna and yarn workspace. At first, there was another module with Storybook version 6.5.9 here, so there were other errors that occurred at 5ab441b. Like this. The target module is packages/react-with-vite.

Thank you for always creating great products. :)

[shilman]

Please try upgrading to SB7: https://storybook.js.org/migration-guides/7.0

Or re-initialize with SB7 (which is currently the default if you run yarn storybook@latest init in a fresh project).

If you provide a broken SB7 reproduction we can take a look and see if we have suggestions.

[hwookim]

@shilman

I upgraded storybook with npx storybook@lateset upgrade. It runs fine, but I think rendering stories takes a bit longer than expected at the first launch.

I encountered an error message when it stopped loading

Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=ccb54aa7

After the initial rendering, everything works fine without any issues. However, the first rendering takes several minutes to complete.

Is this issue specific to me only?

[pietrofxq]

I am having the same issue as @hwookim. Just ran npx storybook@latest init on a new react project and receiving the same error message about @storybook_react_preview.js. Indeed this file is not present in the .vite-storybook folder

[pietrofxq]

I found out my issue: I am developing a chrome extension and storybook does not work with @crxjs/vite-plugin

[yinonov]

still occurs on v7.0.5 in a fresh project (with web-components). is this being addressed or still needs a repro?

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[yinonov]

not sure if this relates to the original raised issue but when I:

1. add a fresh new package inside a turborepo
2. initiate a storybook inside the new package npx storybook@latest init
3. choose "vite" for builder and "web components" as framework
4. npm install from root
5. start storybook and you get "Error: Cannot find module '@storybook/builder-vite'"

If not inside a monorepo, it works just fine

this happens with storybook@7.0.27