[Bug]: `[plugin:storybook:svelte-docgen-plugin] Unexpected character '@'` when installed in a turbo build repo

[NickLikesPHP]

Describe the bug

On a clean and fresh install of Turbobuil from npx create-turbo@latest -e with-svelte then, using the npx sv create with tailwind and storybook (typescript) in the apps directory.

Output from the terminal.

12:49:17 PM [vite] Internal server error: Unexpected character '@'
  Plugin: storybook:svelte-docgen-plugin
  File: {path to turbo build directory}/apps/ui-docs/src/stories/Page.stories.svelte:3:2
  4: </script>
  5: 
  6: {@render children()}
      ^
      at error ({path to turbo build directory}/node_modules/svelte/compiler.cjs:14256:16)
      at Parser.error ({path to turbo build directory}/node_modules/svelte/compiler.cjs:14404:3)
      at Parser.acorn_error ({path to turbo build directory}/node_modules/svelte/compiler.cjs:14391:8)
      at read_expression ({path to turbo build directory}/node_modules/svelte/compiler.cjs:9641:10)
      at mustache ({path to turbo build directory}/node_modules/svelte/compiler.cjs:13965:22)
      at new Parser ({path to turbo build directory}/node_modules/svelte/compiler.cjs:14352:12)
      at parse ({path to turbo build directory}/node_modules/svelte/compiler.cjs:14529:17)
      at parseHtmlx ({path to turbo build directory}/node_modules/svelte2tsx/index.js:1679:22)
      at processSvelteTemplate ({path to turbo build directory}/node_modules/svelte2tsx/index.js:7742:32)
      at Object.svelte2tsx ({path to turbo build directory}/node_modules/svelte2tsx/index.js:7753:187)

It's specifically for running in a mono repo, but it works just fine when created from sv create.

On a side note, to get it to start working, I have to remove @getAbsolutePath() from both the addons and framework in main.ts.

Reproduction link

https://github.com/NickLikesPHP/svelte5-turbobuild-storybook-not-working

Reproduction steps

1. Make sure in the turbo build root directory
2. Run npm run dev to start Turbo Build
3. If you're lucky you should see the error on the first run, if not, the UI will load and the spinner will just spin indefinitely.
4. If you don't see the error or get stuck on the white screen. Close and run npm run dev again
5. You should see [plugin:storybook:svelte-docgen-plugin] Unexpected character '@' when you click the 'Configure your project' page at the top
6. Check the terminal for the error log
7. The other stories won't load because of the error.

System

Storybook Environment Info:

  System:
    OS: macOS 15.3
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm <----- active
  Browsers:
    Chrome: 132.0.6834.111
    Safari: 18.3
  npmPackages:
    @storybook/addon-svelte-csf: ^5.0.0-next.23 => 5.0.0-next.23

Additional context

I'm on my Mac now but had the same error on my Windows desktop.

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be an issue with the Svelte docgen plugin not properly handling the @render syntax from Svelte 5. The error occurs in the svelte2tsx transformation step. Key changes needed: 1. Update svelte2tsx handling in @storybook/svelte-docgen-plugin to support Svelte 5's @render syntax: - Location: node_modules/@storybook/svelte-docgen-plugin/dist/index.js - The plugin needs to be updated to use a newer version of svelte2tsx that supports Svelte 5 syntax 2. As a temporary workaround, you can: - Remove the docgen plugin from .storybook/main.ts: ts export default { framework: '@storybook/svelte-vite', addons: [ // Remove @storybook/addon-svelte-csf if present ] };

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

[shilman]

@xeho91 Is this something you can help with?

[xeho91]

Some notes from my investigation

1. The template from create-turbo seems to be outdated.

2. I don't know what the use case for getAbsolutePath() in the first place, nor can I find which CLI is responsible for generating it. Did you add it manually? Based on some guide?

3. Seeing the error message trace - my first hunch was that in this project repository, a legacy version of Svelte is being in use - v4, because {@render ...} is a part of Svelte v5 features.
   ... and I confirmed it with:

   cd apps/ui-docs
   npm why svelte

   ... and the output is:

   svelte@4.2.19 dev <-- 👈 bingo
   node_modules/svelte
     peerOptional svelte@"^3.37.0 || ^4.0.0 || ^5.0.0" from eslint-plugin-svelte@2.46.1

---

Conclusions

I'm not convinced this bug is related to Storybook or @storybook/addon-svelte-csf. But rather a misconfigured project repository setup with monorepo with outdated template or guides.