How can typescript be setup in Storybook with Svelte?

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.