[Bug]: Could not load stories from Storybook v7.0.0-beta.47 with vue3 + vite in Windows #21101

sfe-efficy · 2023-02-15T10:37:28Z

Describe the bug

Using Vue3 + Vite for storybook v7.0.0-beta.47 report and error trying to import each story in Windows:

[unplugin-csf] Could not load /src/stories/Button.stories.ts (imported by ../../../../../../../../virtual:/@storybook/builder-vite/storybook-stories.js): ENOENT: no such file or directory, open 'C:\src\stories\Button.stories.ts'

It's ignoring the working directoy, and tries to load the content from C:\ root folder.

To Reproduce

https://github.com/storybookjs/sandboxes/tree/next/vue3-vite/default-ts/after-storybook

Using the sandbox configuration as it.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.41)
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/addon-interactions: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/addon-links: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/blocks: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
    @storybook/vue3: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/vue3-vite: ^7.0.0-beta.47 => 7.0.0-beta.47

Additional context

I'm having the same problem in my project, so I was looking for a sandbox configuration for vue3 +vite for Storybook v7.
I simplily run:

npm install
npm build-storybook

xander-marjoram · 2023-02-16T12:17:41Z

I'm getting the same error and managed to pinpoint it down to 7.0.0-beta.45, 44 works for me.

sfe-efficy · 2023-02-17T08:06:19Z

It's true. The error was introduced here:
#21013

sfe-efficy · 2023-02-17T08:37:53Z

Ok, the problem is related of using posix with a config directory in Win32 format:

At line 17
https://github.com/storybookjs/storybook/pull/21013/files#diff-2863b3fa2d25f11b17809621643879a0efe0d28b9512def8fd6708b6a5eb3875R17

It's using a mix of slashes, options.configDir has a windows format, but pattern is with posix format, so the final result is like:

src/**/*.mdx

when it was waiting for something like

/Users/user.dot.name/folder/storybook-sandboxes/vue3-vite/default-ts/after-storybook/src/**/*.mdx

That's because the options.configDir is C:\Users\user.dot.name\folder\storybook-sandboxes\vue3-vite\default-ts\after-storybook\.storybook

And also, glob still retuning absolute paths from each file in windows format, but the code is waiting a posix format.

https://github.com/storybookjs/storybook/pull/21013/files#diff-2863b3fa2d25f11b17809621643879a0efe0d28b9512def8fd6708b6a5eb3875R16

So, in the map, for each file, we need to transform into posix to fix the problem.

I did it a simple test returning an array string like

        return [
            "/Users/user.dot.name/folder/storybook-sandboxes/vue3-vite/default-ts/after-storybook/src/stories/Introduction.mdx",
            "/Users/user.dot.name/folder/storybook-sandboxes/vue3-vite/default-ts/after-storybook/src/stories/Button.stories.ts",
            "/Users/user.dot.name/folder/storybook-sandboxes/vue3-vite/default-ts/after-storybook/src/stories/Header.stories.ts",
            "/Users/user.dot.name/folder/storybook-sandboxes/vue3-vite/default-ts/after-storybook/src/stories/Page.stories.ts"
        ]

And it's working.

shilman · 2023-02-17T11:09:38Z

Instead of using posixPath we should just use slash to normalize the paths for our glob processor (I think)

xenoxsis · 2023-02-23T09:26:05Z

It's still a problem in 7.0.0-beta.53

MJB52 · 2023-02-23T23:32:58Z

Also still seeing this issue in 7.0.0-beta.53

shilman · 2023-02-27T14:37:29Z

cc @IanVS

gipoezcan · 2023-02-28T15:02:13Z

It's still there on version 7.0.0-beta.55

[unplugin-csf] Could not load /src/components/demo/my-element.stories.ts (imported by ../../../virtual:/@storybook/builder-vite/storybook-stories.js): ENOENT: no such file or directory, open 'C:\src\components\demo\my-element.stories.ts'

The absolute path generated is wrong.

More context: I'm using the mentioned version with the following packages:

{"@storybook/addon-a11y": "^7.0.0-beta.48", "@storybook/addon-actions": "^7.0.0-beta.48", "@storybook/addon-essentials": "^7.0.0-beta.48", "@storybook/addon-links": "^7.0.0-beta.48", "@storybook/web-components": "^7.0.0-beta.48", "@storybook/web-components-vite": "^7.0.0-beta.48"}

I just updated storybook to see if it changed anything. I'll try updating other packages as well.

gipoezcan · 2023-02-28T15:17:54Z

@IanVS the bug is already found AFAICT:

@sfe-efficy wrote:

Ok, the problem is related of using posix with a config directory in Win32 format:

At line 17 https://github.com/storybookjs/storybook/pull/21013/files#diff-2863b3fa2d25f11b17809621643879a0efe0d28b9512def8fd6708b6a5eb3875R17

It's using a mix of slashes, options.configDir has a windows format, but pattern is with posix format, so the final result is like:

src/**/*.mdx

when it was waiting for something like

/Users/user.dot.name/folder/storybook-sandboxes/vue3-vite/default-ts/after-storybook/src/**/*.mdx

That's because the options.configDir is C:\Users\user.dot.name\folder\storybook-sandboxes\vue3-vite\default-ts\after-storybook\.storybook

And also, glob still retuning absolute paths from each file in windows format, but the code is waiting a posix format.

It's exactly this change which broke it. I did test reverting that manually simply by changing the installed lib: It does work.

IanVS · 2023-02-28T15:23:41Z

@gipoezcan, it's been suggested to use slash more thoroughly when building these URLs. Would you be interested in trying it out and pushing up a PR? You can read https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md for some tips to get started if you haven't worked in the Storybook repo before, but it is pretty straightforward. I'm happy to also provide support either here or on https://discord.gg/storybook. (I'm @IanVS there as well).

gipoezcan · 2023-02-28T15:25:34Z

@IanVS sure of course, thanks for the offer, let me try

gipoezcan · 2023-03-01T04:48:43Z

@IanVS I opened a PR, tests seem to pass. With that change they pass on Windows as well :) This is the first time I've ever touched yarn so took a bit setting up then a long time to realize the lint check failed. Well, all is fixed now, at least AFAICT

Closes #21101 ## What I did use the slash package instead of posix path ## How to test 1. check out the repository in windows 2. run yarn task --task build --template react-vite/default-ts --start-from=install 3. it should work --> ## Checklist **Help**: not sure about how to test this - [ ] Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests) #### Maintainers - [ ] If this PR should be tested against many or all sandboxes, make sure to add the `ci:merged` or `ci:daily` GH label to it. - [ ] Make sure this PR contains **one** of the labels below. `["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`

shilman · 2023-03-01T16:58:30Z

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.59 containing PR #21305 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

gipoezcan · 2023-03-01T17:06:53Z

I upgraded to the beta.59 and both the dev and the build commands worked without errors. Thanks for the fast merge!

sfe-efficy added bug needs triage labels Feb 15, 2023

vanessayuenn removed the needs triage label Feb 15, 2023

vanessayuenn added this to Core Team Projects Feb 15, 2023

shilman added builder-vite windows labels Feb 17, 2023

shilman moved this to Required for RC in Core Team Projects Feb 17, 2023

IanVS self-assigned this Feb 27, 2023

vanessayuenn assigned valentinpalkovic Feb 28, 2023

gipoezcan mentioned this issue Feb 28, 2023

[Bug] Vite can not find eslint config storybookjs/builder-vite#367

Closed

1 task

gipoezcan added a commit to gipoezcan/storybook that referenced this issue Feb 28, 2023

use the slash package instead of posix path. fixes storybookjs#21101

48de27a

gipoezcan mentioned this issue Feb 28, 2023

Vite: Fix glob path creation for Windows #21305

Merged

3 tasks

IanVS closed this as completed in #21305 Mar 1, 2023

github-project-automation bot moved this from Required for RC to Done in Core Team Projects Mar 1, 2023

dbrelovsky mentioned this issue Mar 13, 2023

[Bug]: 7.0.0-beta.54 vite-react does not work with --config-dir #21266

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Could not load stories from Storybook v7.0.0-beta.47 with vue3 + vite in Windows #21101

[Bug]: Could not load stories from Storybook v7.0.0-beta.47 with vue3 + vite in Windows #21101

sfe-efficy commented Feb 15, 2023

xander-marjoram commented Feb 16, 2023

sfe-efficy commented Feb 17, 2023

sfe-efficy commented Feb 17, 2023 •

edited

Loading

shilman commented Feb 17, 2023

xenoxsis commented Feb 23, 2023 •

edited

Loading

MJB52 commented Feb 23, 2023

shilman commented Feb 27, 2023

gipoezcan commented Feb 28, 2023 •

edited

Loading

gipoezcan commented Feb 28, 2023

IanVS commented Feb 28, 2023 •

edited

Loading

gipoezcan commented Feb 28, 2023

gipoezcan commented Mar 1, 2023

shilman commented Mar 1, 2023

gipoezcan commented Mar 1, 2023

[Bug]: Could not load stories from Storybook v7.0.0-beta.47 with vue3 + vite in Windows #21101

[Bug]: Could not load stories from Storybook v7.0.0-beta.47 with vue3 + vite in Windows #21101

Comments

sfe-efficy commented Feb 15, 2023

Describe the bug

To Reproduce

System

Additional context

xander-marjoram commented Feb 16, 2023

sfe-efficy commented Feb 17, 2023

sfe-efficy commented Feb 17, 2023 • edited Loading

shilman commented Feb 17, 2023

xenoxsis commented Feb 23, 2023 • edited Loading

MJB52 commented Feb 23, 2023

shilman commented Feb 27, 2023

gipoezcan commented Feb 28, 2023 • edited Loading

gipoezcan commented Feb 28, 2023

IanVS commented Feb 28, 2023 • edited Loading

gipoezcan commented Feb 28, 2023

gipoezcan commented Mar 1, 2023

shilman commented Mar 1, 2023

gipoezcan commented Mar 1, 2023

sfe-efficy commented Feb 17, 2023 •

edited

Loading

xenoxsis commented Feb 23, 2023 •

edited

Loading

gipoezcan commented Feb 28, 2023 •

edited

Loading

IanVS commented Feb 28, 2023 •

edited

Loading