Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Svelte storybook typescript problem "Internal server error: ... Unexpected token"

See original GitHub issue

When i set a type on export i got an error, i am not sure if it is a builder or ts problem. But in vs code editor or when i run my app, everything is ok when i set the type, so i think it is a problem from the builder or storybook (or my misconfiguration).

icon.svelte (this works)

<script lang="ts">
  export let src = []
</script>

icon.svelte (this not)

<script lang="ts">
  export let src: any[] = []
</script>

Error:

18:07:16 [vite] ✨ dependencies updated, reloading page...
18:07:31 [vite] Internal server error: /home/rottmann/git/app/src/components/icon/icon.svelte:11:16 Unexpected token
  Plugin: vite-plugin-svelte
  File: /home/rottmann/git/app/src/components/icon/icon.svelte
   11 |    export let src: any[] = []

./storybook/main.cjs

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-svelte-csf"
  ],
  "framework": "@storybook/svelte",
  "core": {
    "builder": "storybook-builder-vite"
  },
  "svelteOptions": {
    "preprocess": require("svelte-preprocess")({
      typescript: true,
      postcss: true,
      sourceMap: true
    })
  }
}

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "esnext",
    "target": "esnext",
    "importsNotUsedAsValues": "error",
    "isolatedModules": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "baseUrl": "./src",
    "allowJs": true,
    "checkJs": true,
    "paths": {
      "svelte": [ "node_modules/svelte" ],
      "~/*": [ "*" ]
    },
    "strict": true,
    "types": [ "node", "vite/client" ]
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.svelte"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

Installed with: npx sb init --builder storybook-builder-vite

Versions: storybook-builder-vite 0.1.11 typescript 4.5.3

Issue Analytics

State:
Created 2 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

rottmanncommented, Dec 14, 2021

Thank you! Can confirm it works.

0reactions

IanVScommented, Dec 14, 2021

Good catch, I’ve opened #180 with a fix. Maybe you can try the changes out in your own node_modules and see if it works in your project?

Top Results From Across the Web

Official svelte typescript support · Issue #12754 - GitHub

Does Storybook support Svelte with Typescript? ... import type results in "Unexpected token" error sveltejs/language-tools#417.

Storybook + Vite + Svelte + Typescript - Stack Overflow

svelte files (in the component files it works fine). I keep getting errors like this: [vite] Internal server error: Unexpected token Plugin: ...

Error 'unexpected token' with Typescript : r/sveltejs - Reddit

It looks like your TypeScript setup is incorrect somehow. Did you forget to run npm install ? How did you set up this...

Official svelte typescript support #12754 - Issuehunt

Unfortunately, this creates a crash issue on storybook launch ( npm run ... node_modules/svelte-loader/index.js): Error: ParseError: Unexpected token (4:20) ...

SvelteKit using TS, and Storybook setup - YouTube

Let's get building with storybook.This is the fresh new way to build out storybook using Typescript and using the vite-builder rather than ...