[7.0]: Addon paths are url encoded and broken on Windows

[nikki-cat]

Describe the bug

When trying to run yarn storybook, storybook does start the server and at least runs the main skeleton of the app, but at some point gets errors and no stories or pages are loaded.

Eventually the following error happens:

yarn storybook
yarn run v1.22.19
warning package.json: No license field
$ storybook dev -p 6006
@storybook/cli v7.0.0-alpha.38

info => Loading presets
info => Loading presets
info => Loading presets
info => Starting manager..
(node:26224) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 7.0.0-alpha.38 for vue3-vite started    │
│   3.27 s for manager and 4.94 s for preview         │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://10.253.254.250:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
3:52:12 PM [vite] error while updating dependencies:
Error: ENOENT: no such file or directory, rename 'C:\vueStorybook\vue-storybook-repo\node_modules\.cache\.vite-storybook\deps_temp' -> 'C:\vueStorybook\vue-storybook-repo\node_modules\.cache\.vite-storybook\deps'

also in the browser I get the following errors in the console (This happens regardless of the previous error or not), I am not sure if this matters or not:

Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-controls%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-actions%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-backgrounds%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-viewport%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-toolbars%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-measure%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-outline%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-interactions%5Cmanager.mjs:1          Failed to load resource: the server responded with a status of 404 (Not Found)
client.ts:19 [vite] connecting...
client.ts:134 [vite] connected.
:6006/node_modules/.cache/.vite-storybook/deps/@storybook_vue3-vite.js?v=907fe626:1          Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

To Reproduce

If the error doesn't show up right away, delete the .cache folder from node_modules and run yarn storybook again. The error should now be consistent.
Repo: https://github.com/nikki-cat/vue-vite-storybook-mini-repo

System

Environment Info:

  System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 18.9.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (106.0.1370.47)
  npmPackages:
    @storybook/addon-essentials: 7.0.0-alpha.39 => 7.0.0-alpha.39
    @storybook/addon-interactions: 7.0.0-alpha.39 => 7.0.0-alpha.39
    @storybook/addon-links: 7.0.0-alpha.39 => 7.0.0-alpha.39
    @storybook/testing-library: 0.0.14-next.0 => 0.0.14-next.0
    @storybook/vue3: 7.0.0-alpha.39 => 7.0.0-alpha.39
    @storybook/vue3-vite: 7.0.0-alpha.39 => 7.0.0-alpha.39

Additional context

Even the latest version has this problem unfortunately.

Also the system information shows "Windows 10", however I did upgrade it to 11.

I have most of this info in the repo, that I linked to.
Repo: https://github.com/nikki-cat/vue-vite-storybook-mini-repo

[nikki-cat]

Oh also, wanted to mention that Vite was updated to latest beta version.

[mjcarsjens]

Running into this same issue as well in a SB7+Vite+Lit project on Windows 10.
When creating a new project and running it with:

npm create vite@latest sb-vite --template lit-ts
cd sb-vite
npx sb@next init --builder=vite
npm run storybook

This results in all addon scripts being added in the HTML using a encoded backslash instead of a slash (%5C), probably due to this being the windows path separator. This does not work for retrieving the scripts though, resulting in the addons not being loaded in, and when building the storybook this results in the build not working at all.

Also ran into the ENOENT deps_temp -> deps issue a few times, seems to sometimes solve itself sporadically though.

[nikki-cat]

This results in all addon scripts being added in the HTML using a encoded backslash instead of a slash (%5C), probably due to this being the windows path separator.

Oh wow, I hadn't thought of that, but that actually makes a lot of sense. Do you have any idea for a fix/workaround? or is it more a Vite problem? I have contemplated posting this issue on Vite's Github too, but I'm a bit shy about double-dipping.

[mjcarsjens]

Same, still a bit in doubt about whether this is a Storybook or Vite issue, but looking at the fact that this only occurs for the sb-addons and that other script sources get injected properly I'm inclined to believe the issue lies within the Storybook implementation.

Have tried to dig around to find the specific cause of this issue but no luck so far, hoping I can find some time to look into it a bit further later today.

[mjcarsjens]

With regards to the ENOENT issue, it seems to occur for me only when I add dependencies to the optimizeDeps.include entry in in the SB specific vite config changes made in main.js (as seen in the example on https://storybook.js.org/blog/first-class-vite-support-in-storybook). Adding these to the project-wide vite config file solved this for me.

Looking at your project however makes me think this might have just solved it by coincidence and that it can reoccur at any moment as you don't have a viteFinal in your main.js, so I'm still at a loss with regards to what is causing this specific issue.

[nikki-cat]

Looking at your project however makes me think this might have just solved it by coincidence and that it can reoccur at any moment as you don't have a viteFinal in your main.js, so I'm still at a loss with regards to what is causing this specific issue.

Yup, in regards to the ENOENT bug, it's pretty much out-of-the-box, and the only thing I have to do to make it consistent is delete the .cache folder from node_modules. Everything else is left in as created by the storybook init bootstrap, so theoretically it should just work, right?

[mjcarsjens]

It first started occurring for me when I deleted the .cache folder too. This should indeed in no way cause this specific behaviour and should just work. Even deleting the node_modules altogether and reinstalling everything did not stop this issue from occurring for me.

[IanVS]

Thanks for filing this issue. It seems like there are two things happening, one is an issue in vite (ENOENT), which is filed at vitejs/vite#9986.

For the windows issue, that definitely seems like a storybook bug. Could you try reverting back a few alphas, to see if it was something that started recently? Maybe try alpha.36, for example?

[nikki-cat]

Thanks for filing this issue. It seems like there are two things happening, one is an issue in vite (ENOENT), which is filed at vitejs/vite#9986.

For the windows issue, that definitely seems like a storybook bug. Could you try reverting back a few alphas, to see if it was something that started recently? Maybe try alpha.36, for example?

Done! alpha.36 wasn't on the list of version, but it let me choose "35" which I did, and there seems to have been no issues with loading the files in that version. So your suspicions that it's been introduced recently is probably true.
But the css is still wonky, but I am starting to think that maybe it's because it didnt take dark mode into account? I was a bit confused about whether it was like that due to errors.

It looks like this when it's in dark mode (which it seems to be by default)

[mjcarsjens]

Same for me, reverting to alpha.35 fixes the issue, also couldn't find alpha.36. This issue starts occurring from alpha.37.

[IanVS]

Yes, those default stories that it installs are not designed for dark mode, which was added in storybook 7. We'll get it straightened out, but you shouldn't need to worry about it for now.

Thanks for the troubleshooting, that will help us narrow in on what happened!

[nikki-cat]

Ok, thank you for the clarification :) And happy to help!

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.43 containing PR #19589 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.