[Bug]: Vitest doesnt work with Svelte CSF when using the legacyTemplate option to support the old v4 API

[valentinpalkovic]

Describe the bug

The new v5 of the addon has a legacyTemplate option that allows users to keep using deprecated APIs (how to define stories) until they've successfully migrated to the new API.

The legacy support works by injecting a Vite plugin that has enforce: 'pre' that will behind the scenes, migrate the stories source to the new API.

This means it has to run as the very first plugin, before the Svelte plugin compiles the source to JS.
But in Vitest, the plugin is added after the Svelte plugin. This would have been fixed by enforce: 'pre', except the Svelte Vite plugin also uses enforce: 'pre', so that gets to go first because it is the first plugin in the list.

Workaround:
There's a fairly straight forward userland workaround right now.
When configuring the Storybook Vitest workspace, don't extend the existing Vite config, but instead copy it in manually to the definition, so that the user can add the storybookTest() plugin before the Svelte plugin

Reproduction link

Reproduction steps

No response

System

-

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is a plugin ordering issue in Vitest configuration. To fix: 1. Modify @storybook/test-runner/dist/vitest/config.js to ensure the Storybook plugin is injected before Svelte's plugin when using legacyTemplate mode. 2. Add explicit plugin ordering by modifying the plugin injection logic to use: js plugins: [ storybookTest({ enforce: 'pre', order: 'pre' // Add explicit ordering before Svelte }), svelte() ] 3. Alternatively, update the Vite config merge strategy in the test runner to preserve plugin order when extending configs. The relevant code would be in the test runner's Vite configuration handling.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile