How to get sourcemaps working with svelte-preprocess, typescript, sourced .ts file

Question

I am using svelte-preprocess to compile typescript in my Svelte app.

Here is the svelte file:

<script lang="ts" src="./component.ts"></script>
<template src="./component.html></template>
<style src="./component.scss"></style>

Here is the svelte section of rollup.config.js

svelte({
    preprocess: sveltePreprocess({ 
        sourceMap: !production, 
        defaults: {
           markup: 'html',
           script: 'typescript',
           style: 'scss'
        }
    }),
    compilerOptions: {
        dev: !production
    }
}),

I also have this in the config file

    typescript({
        sourceMap: !production,
        inlineSources: !production
    }),

The problem I'm having is that the sourcemaps aren't happening for component.ts. When I get an error in Chrome's debugger somewhere in component.ts it shows a line number at the last line of the component.svelte file instead of component.ts.

When I inline the code within the script lang="ts" tag it does indeed work and the sourcemaps come up fine.

How do I get svelte-preprocess to work with sourcemaps, typescript and sourced from a .ts file from the svelte component file?

Answer 1

With Svelte on version 3.44.0 you can count on a new compiler option, enableSourcemap, which provides more control over the compiler output for JavaScript and CSS sourcemaps.

This configuration provides source maps for preprocessed stylesheets and also JavaScript.

// svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  compilerOptions: {
    enableSourcemap: true,
  },
  preprocess: preprocess({
    sourceMap: true,
  }),
  kit: {
    adapter: adapter(),
    target: '#svelte',
  },
};

export default config;

Refer to release notes on 3.44.0 for more details: https://svelte.dev/blog/whats-new-in-svelte-november-2021