如何使用 Svelte 在 Storybook 中设置 typescript？

Question

I'm trying to use Storybook with a Svelte component library. Svelte is set up to use Rollup. I wonder if Storybook's use of Webpack could have anything to do with my issue?

• Storybook is working just fine as long as my svelte components are written in JS
• Svelte is set up to work with TS just fine
• adding even a simple type declaration to a component's script breaks Storybook

Example:

I changed this:

 <script lang="ts"> export let text = '' export let sent = true </script>

to this:

 <script lang="ts"> export let text: string export let sent: boolean </script>

I get this error:

Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Unexpected token (2:17)
1: <script lang="ts">
2:   export let text: string
                    ^

Answer 1

To configure Storybooks Webpack for this, I changed .storybook/main.js to this: (difference being adding webPackFinal ):

 module.exports = { webpackFinal: async (config) => { const svelteLoader = config.module.rules.find( (r) => r.loader && r.loader.includes('svelte-loader')) svelteLoader.options.preprocess = require('svelte-preprocess')() return config }, "stories": [ // "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", { name: "@storybook/addon-essentials", options: { docs: false } } ] }

NOTE: Typescript/Svelte will not play nicely with the __.stories.mdx docs you can create with the docs addon. There may be some way to setup custom configuration for this but I certainly couldn't figure it out.