[Bug]: SyntaxError: Unexpected token '<', Storybook Core Server doesn't know how to process Svelte files

[arkmech]

Describe the bug

In main.ts, adding @storybook/addon-svelte-csf to the addons array. Storybook exists. When removing the @storybook/addon-svelte-csf, storybook server starts ok.

It doesn't recognize the < from the Svelte components (Meta) <script> tag form the node modules.

1. Something wrong from main.ts SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/main.ts.

2. Coming from this addon. SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: /Users/me/Dev/project/node_modules/@storybook/addon-svelte-csf/dist/index.js.

3. Specifically the < from the script tag.

   /Users/me/Dev/project/node_modules/@storybook/addon-svelte-csf/dist/components/Meta.svelte:1
   <script>
   ^

My .main.ts

const config: StorybookConfig = {
  stories: ["../src/lib/**/*.mdx", "../src/lib/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)"],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@chromatic-com/storybook"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/addon-svelte-csf"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/sveltekit"),
    options: {},
  },
};
export default config;

Steps to reproduce the behavior

1. Make a Turborepo project
2. The UI library is a SvelteKit Library Project
3. Initialize storybook
4. Add the @storybook/addon-svelte-csf to the addons array and .stories.svelte to the stories array

Expected behavior

Storybook Server to properly load the @storybook/addon-svelte-csf addon and be able to write stories in Svelte CSF, aka Button.stories.svelte

Environment

• OS: MacOS Sonoma
• Node.js version: v22.4.1
• NPM version: 10.8.1
• Browser (if applicable): Chrome
• Browser version (if applicable): Version 126.0.6478.127 (Official Build) (arm64)
• Device (if applicable): Macbook Pro M1 Max

[JReinhold]

Could you try removing the getAbsolutePath call from the svelte addon, and just have the plain string?

[arkmech]

It came when I setup Storybook, since I use pnpm and turborepo.

In, main.ts

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}

[arkmech]

Could you try removing the getAbsolutePath call from the svelte addon, and just have the plain string?

If I do remove it, then yeah storybook starts up. But thats because its no longer referencing the package in node_modules. But the *.stories.svelte is causing the issue after that.

[JReinhold]

Okay.

Please share a minimal reproduction repo that we can investigate.

See https://storybook.js.org/docs/contribute/how-to-reproduce

[arkmech]

Yeah I'm actually thinking this is a Svelte 5 compatibility issue, I think I will just wait till Svelte 5 is released and Storybook has full support for Svelte 5. Thanks

[JReinhold]

Yeah I'm actually thinking this is a Svelte 5 compatibility issue, I think I will just wait till Svelte 5 is released and Storybook has full support for Svelte 5. Thanks

We just released support for Svelte 5 in a prerelease, maybe that helps you. See https://github.com/storybookjs/addon-svelte-csf/discussions/191

You can try it out with npm install @srorybook/addon-svelte-csf@next