[Bug] - Bug with Vite 6 and @sveltejs/vite-plugin-svelte v5 #238

squelix · 2024-11-28T16:11:46Z

Describe the bug

All the stories are bugged and does not work.

Steps to reproduce the behavior

Start storybook in watch mode
The error occurs on every stories

Expected behavior

It should starts the Storybook with no error.

Screenshots and/or logs

Environment

@storybook/addon-svelte-csf: v5.0.0-next.13
vite: 6.0.1
@sveltejs/vite-plugin-svelte: 5.0.1
OS: MacO
Node.js version: 22.11.0
Yarn version: 4.5.2
Browser (if applicable): chrome
Device (if applicable): MacbookPro

xeho91 · 2024-11-29T01:23:53Z

Which version of Storybook are you using?

Could be related to the fact that Vite v6 support for Storybook core currently is available in the prerelease of v8.5.

EDIT: It likely might be released in v8.4.6

yannbf · 2024-11-29T08:50:50Z

Hey there, as soon as we release a new Storybook patch as @xeho91 stated, can you please try it out? This issue should hopefully be resolved.

JReinhold · 2024-11-29T12:20:20Z

8.4.6 is released with Vite 6 support. 🎉

https://github.com/storybookjs/storybook/releases/tag/v8.4.6

umaranis · 2024-12-01T12:12:55Z

Hi team,
Even with storybook v8.4.0, I am getting the error.

WARN 🚨 Unable to index files:
WARN - ./src/stories/Button.stories.svelte: Cannot read properties of undefined (reading 'warningFilter')
WARN - ./src/stories/Header.stories.svelte: Cannot read properties of undefined (reading 'warningFilter')
WARN - ./src/stories/Page.stories.svelte: Cannot read properties of undefined (reading 'warningFilter')
The request url "/Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/vite@5.4.10_@types+node@22.7.4/node_modules/vite/dist/client/env.mjs" is outside of Vite serving allow list.

xeho91 · 2024-12-02T01:04:11Z

Hi team,
Even with storybook v8.4.0, I am getting the error.

WARN 🚨 Unable to index files:
WARN - ./src/stories/Button.stories.svelte: Cannot read properties of undefined (reading 'warningFilter')
WARN - ./src/stories/Header.stories.svelte: Cannot read properties of undefined (reading 'warningFilter')
WARN - ./src/stories/Page.stories.svelte: Cannot read properties of undefined (reading 'warningFilter')
The request url "/Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/vite@5.4.10_@types+node@22.7.4/node_modules/vite/dist/client/env.mjs" is outside of Vite serving allow list.

@umaranis

The latest version of Storybook which supports Vite v6 is v8.4.6.

See this comment.

You can try this out and let us know if you're still encountering any errors.

umaranis · 2024-12-02T10:50:17Z

HI @xeho91 ,

Getting the same error with v8.4.6 as well.

Here are the dependencies:

{
    "@chromatic-com/storybook": "^3.2.2",
    "@fontsource/fira-mono": "^5.1.0",
    "@neoconfetti/svelte": "^2.2.1",
    "@storybook/addon-essentials": "^8.4.6",
    "@storybook/addon-interactions": "^8.4.6",
    "@storybook/addon-svelte-csf": "^4.2.0",
    "@storybook/blocks": "^8.4.6",
    "@storybook/svelte": "^8.4.6",
    "@storybook/sveltekit": "^8.4.6",
    "@storybook/test": "^8.4.6",
    "@sveltejs/adapter-auto": "^3.3.1",
    "@sveltejs/kit": "^2.9.0",
    "@sveltejs/vite-plugin-svelte": "^5.0.1",
    "storybook": "^8.4.6",
    "svelte": "^5.2.12",
    "svelte-check": "^4.1.0",
    "typescript": "^5.7.2",
    "vite": "^6.0.1"
  }

Also tried with the alpha version but got the same error. I created the project using svelte CLI sv that generates the following dependencies.

{
    "@chromatic-com/storybook": "^3.2.2",
    "@storybook/addon-essentials": "^8.5.0-alpha.14",
    "@storybook/addon-interactions": "^8.5.0-alpha.14",
    "@storybook/addon-svelte-csf": "^5.0.0-next.13",
    "@storybook/blocks": "^8.5.0-alpha.14",
    "@storybook/svelte": "^8.5.0-alpha.14",
    "@storybook/sveltekit": "^8.5.0-alpha.14",
    "@storybook/test": "^8.5.0-alpha.14",
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "eslint": "^9.7.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-storybook": "^0.11.1",
    "eslint-plugin-svelte": "^2.36.0",
    "globals": "^15.0.0",
    "mdsvex": "^0.11.2",
    "prettier": "^3.3.2",
    "prettier-plugin-svelte": "^3.2.6",
    "storybook": "^8.5.0-alpha.14",
    "svelte": "^5.0.0",
    "svelte-check": "^4.0.0",
    "typescript": "^5.0.0",
    "typescript-eslint": "^8.0.0",
    "vite": "^5.0.3"
  }

I originally had Node 23 installed, I downgraded to 20 and 18. The issue persists for me across these node versions.

WARN The following packages are incompatible with Storybook 8.5.0-alpha.14 as they depend on different major versions of Storybook packages:
WARN - @storybook/addon-svelte-csf@5.0.0-next.13
WARN 
WARN 
WARN Please consider updating your packages or contacting the maintainers for compatibility details.
WARN For more on Storybook 8 compatibility, see the linked GitHub issue:
WARN https://github.com/storybookjs/storybook/issues/26031
WARN Could not resolve addon "/Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.13_@storybook+svelte@8.5.0-alpha.14_storybook@8.5.0-al_5okre4h2jietsqgio6ru7iaove/node_modules/@storybook/addon-svelte-csf", skipping. Is it installed?
WARN Could not resolve addon "/Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.13_@storybook+svelte@8.5.0-alpha.14_storybook@8.5.0-al_5okre4h2jietsqgio6ru7iaove/node_modules/@storybook/addon-svelte-csf", skipping. Is it installed?
info => Starting manager..
info => Starting preview..
The following Vite config options will be overridden by SvelteKit:
  - base
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 8.5.0-alpha.14 for sveltekit started   │
│   188 ms for manager and 509 ms for preview        │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.1.45:6006/     │
│                                                    │
╰────────────────────────────────────────────────────╯
WARN 🚨 Unable to index files:
WARN - ./src/stories/Button.stories.svelte: Invariant failed: No matching indexer found for /Users/umar/Documents/Projects/lexical/svelte-lexical/packages/website/src/stories/Button.stories.svelte
WARN - ./src/stories/Header.stories.svelte: Invariant failed: No matching indexer found for /Users/umar/Documents/Projects/lexical/svelte-lexical/packages/website/src/stories/Header.stories.svelte
WARN - ./src/stories/Page.stories.svelte: Invariant failed: No matching indexer found for /Users/umar/Documents/Projects/lexical/svelte-lexical/packages/website/src/stories/Page.stories.svelte
WARN Could not resolve addon "/Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.13_@storybook+svelte@8.5.0-alpha.14_storybook@8.5.0-al_5okre4h2jietsqgio6ru7iaove/node_modules/@storybook/addon-svelte-csf", skipping. Is it installed?
WARN Could not resolve addon "/Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.13_@storybook+svelte@8.5.0-alpha.14_storybook@8.5.0-al_5okre4h2jietsqgio6ru7iaove/node_modules/@storybook/addon-svelte-csf", skipping. Is it installed?

yannbf · 2024-12-03T21:29:08Z

@umaranis could you please provide a minimal reproduction so we can check it out? Thanks!

umaranis · 2024-12-08T05:39:12Z

For reproduction steps, I created a new svelte project using sv CLI. This time, it gives me different versions for dependencies. It is working fine with the following:

{
"@chromatic-com/storybook": "^3.2.2",
"@eslint/compat": "^1.2.3",
"@playwright/test": "^1.45.3",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-svelte-csf": "^5.0.0-next.13",
"@storybook/blocks": "^8.4.7",
"@storybook/svelte": "^8.4.7",
"@storybook/sveltekit": "^8.4.7",
"@storybook/test": "^8.4.7",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.9.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"eslint": "^9.7.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0",
"globals": "^15.0.0",
"mdsvex": "^0.11.2",
"prettier": "^3.3.2",
"prettier-plugin-svelte": "^3.2.6",
"storybook": "^8.4.7",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"typescript-eslint": "^8.0.0",
"vite": "^6.0.0",
"vitest": "^2.0.4"
}

xeho91 · 2024-12-08T06:03:59Z

Following #238 (comment)

In the first case, this likely was the problem:

{
    "@chromatic-com/storybook": "^3.2.2",
    "@fontsource/fira-mono": "^5.1.0",
    "@neoconfetti/svelte": "^2.2.1",
    "@storybook/addon-essentials": "^8.4.6",
    "@storybook/addon-interactions": "^8.4.6",
-   "@storybook/addon-svelte-csf": "^4.2.0",
+   "@storybook/addon-svelte-csf": "^5.0.0-next.13",
    "@storybook/blocks": "^8.4.6",
    "@storybook/svelte": "^8.4.6",
    "@storybook/sveltekit": "^8.4.6",
    "@storybook/test": "^8.4.6",
    "@sveltejs/adapter-auto": "^3.3.1",
    "@sveltejs/kit": "^2.9.0",
    "@sveltejs/vite-plugin-svelte": "^5.0.1",
    "storybook": "^8.4.6",
    "svelte": "^5.2.12",
    "svelte-check": "^4.1.0",
    "typescript": "^5.7.2",
    "vite": "^6.0.1"
  }

In the second case, hard to tell, but those used versions have nothing to do with the subject of this issue:

{
    "@chromatic-com/storybook": "^3.2.2",
    "@storybook/addon-essentials": "^8.5.0-alpha.14",
    "@storybook/addon-interactions": "^8.5.0-alpha.14",
    "@storybook/addon-svelte-csf": "^5.0.0-next.13",
    "@storybook/blocks": "^8.5.0-alpha.14",
    "@storybook/svelte": "^8.5.0-alpha.14",
    "@storybook/sveltekit": "^8.5.0-alpha.14",
    "@storybook/test": "^8.5.0-alpha.14",
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
-   "@sveltejs/vite-plugin-svelte": "^4.0.0",
+   "@sveltejs/vite-plugin-svelte": "^5.0.0",
    "eslint": "^9.7.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-storybook": "^0.11.1",
    "eslint-plugin-svelte": "^2.36.0",
    "globals": "^15.0.0",
    "mdsvex": "^0.11.2",
    "prettier": "^3.3.2",
    "prettier-plugin-svelte": "^3.2.6",
    "storybook": "^8.5.0-alpha.14",
    "svelte": "^5.0.0",
    "svelte-check": "^4.0.0",
    "typescript": "^5.0.0",
    "typescript-eslint": "^8.0.0",
-   "vite": "^5.0.3"
+   "vite": "^6.0.0"
  }

I understand you had those version issues while generating the project template with sv. This addon doesn't have any control over it.

To sum up, it seems like the original issue is possibly resolved given the #238 (comment).

squelix added the bug Something isn't working label Nov 28, 2024

yannbf added this to Core Team Projects Nov 29, 2024

yannbf moved this to In Progress in Core Team Projects Nov 29, 2024

JReinhold closed this as completed Dec 8, 2024

github-project-automation bot moved this from In Progress to Done in Core Team Projects Dec 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug] - Bug with Vite 6 and @sveltejs/vite-plugin-svelte v5 #238

[Bug] - Bug with Vite 6 and @sveltejs/vite-plugin-svelte v5 #238

squelix commented Nov 28, 2024 •

edited

Loading

xeho91 commented Nov 29, 2024 •

edited

Loading

yannbf commented Nov 29, 2024

JReinhold commented Nov 29, 2024

umaranis commented Dec 1, 2024

xeho91 commented Dec 2, 2024 •

edited

Loading

umaranis commented Dec 2, 2024 •

edited

Loading

yannbf commented Dec 3, 2024

umaranis commented Dec 8, 2024

xeho91 commented Dec 8, 2024

[Bug] - Bug with Vite 6 and @sveltejs/vite-plugin-svelte v5 #238

[Bug] - Bug with Vite 6 and @sveltejs/vite-plugin-svelte v5 #238

Comments

squelix commented Nov 28, 2024 • edited Loading

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots and/or logs

Environment

xeho91 commented Nov 29, 2024 • edited Loading

yannbf commented Nov 29, 2024

JReinhold commented Nov 29, 2024

umaranis commented Dec 1, 2024

xeho91 commented Dec 2, 2024 • edited Loading

umaranis commented Dec 2, 2024 • edited Loading

yannbf commented Dec 3, 2024

umaranis commented Dec 8, 2024

xeho91 commented Dec 8, 2024

squelix commented Nov 28, 2024 •

edited

Loading

xeho91 commented Nov 29, 2024 •

edited

Loading

xeho91 commented Dec 2, 2024 •

edited

Loading

umaranis commented Dec 2, 2024 •

edited

Loading