Rollup is not generating typescript sourcemap

Question

I am using rollup with svelte + typescript + scss. My problem is that I am not able to generate source maps.

Following is my rollup config file:

import svelte from 'rollup-plugin-svelte'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import typescript from '@rollup/plugin-typescript'
import alias from '@rollup/plugin-alias'
    
const production = !process.env.ROLLUP_WATCH
const path = require('path').resolve(__dirname, 'src')
const svelteOptions = require('./svelte.config')
    
function serve() {
    let server
    
    function toExit() {
        if (server) server.kill(0)
    }
    
    return {
        writeBundle() {
            if (server) return
            server = require('child_process').spawn(
                'yarn',
                ['run', 'start', '--', '--dev'],
                {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true,
                }
            )
    
            process.on('SIGTERM', toExit)
            process.on('exit', toExit)
        },
    }
}
    
export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js',
    },
    plugins: [
        alias({
            entries: [
                { find: '@app', replacement: `${path}` },
                { find: '@components', replacement: `${path}/components` },
                { find: '@includes', replacement: `${path}/includes` },
                { find: '@styles', replacement: `${path}/styles` },
                { find: '@pages', replacement: `${path}/pages` },
            ],
        }),
        svelte(svelteOptions),
    
        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ['svelte'],
        }),
        commonjs(),
        typescript({ sourceMap: !production }),
    
        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),
    
        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),
    
        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser(),
    ],
    watch: {
        clearScreen: false,
    },
}

I am not sure what exactly am I doing wrong. Here is the link to code I am using. Any help will be deeply appreciated!

Answer 1

This is what worked for me: you need to set sourceMap: false in the typescript rollup plugin options.

export default {
  input: 'src/main.ts',
  output: {
    sourcemap: true,
    format: 'iife',
    ...
  },
  plugins: [
    ...
    svelte(...),
    typescript({ sourceMap: false }),
    ...
  ]
}

It turns out rollup's sourcemap collapser conflicts with the typescript's plugin sourcemap generator. That's why it works on prod builds but not in dev builds (because originally it is sourceMap: !production). Just let rollup do the heavy lifting.

Answer 2

As also mentioned by others, it seems like the combination of TypeScript and Rollup leads to the problem. Disabling the source map in TypeScript only fixes the problem of mapping Svelte to TypeScript. However you only receive a source map showing source in the compiled JavaScript, not in the original TypeScript. I finally found a solution, that worked for me: Just add the Option inlineSources: true to the TypeScript options:

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

This circumvents the problem by simply not creating a duplicate SourceMap, but by copying the source code from TypeScript into the SourceMap.

Answer 3

For anyone using terser, not svelte, this solved the same problem for me:

import sourcemaps from 'rollup-plugin-sourcemaps';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';

export default [
  {
    input: 'dist/index.js',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs'
      },
      {
        file: 'dist/fesm2015/index.js',
        format: 'es'
      }
    ],
    plugins: [
      sourcemaps(),
      terser(),
      typescript({ sourceMap: true, inlineSources: true })
    ]
  }
];

Apparently rollup-plugin-sourcemaps is needed to do the magic necessary to utilize the map files generated by the TypeScript compiler and feed them to terser.

Answer 4

For me, I am able to map, by making sourcemap: "inline"

In the /build/index.esm.js file will have mapping inside.

export default {
  input: "src/index.ts",
  output: [
    {
      file: 'build/index.esm.js',
      format: 'es',
      sourcemap:  "inline"
    },
  ],
  plugins: [
    typescript({ sourceMap: false, inlineSources: true  }),
  ]
}

Answer 5

I was having a similar issue with Karma, rollup, and typescript. I fixed it by adding "sourceRoot":"/base/" to my tsconfig.json file. Before: map file entries pointed to /src/. After: map file entries pointed to /base/src/ and everything worked.

// tsconfig.rollup.json
"compilerOptions": {
  "module": "ES2022",
  "esModuleInterop": true,
  "target": "ES2022",
  "moduleResolution": "classic",
  "sourceMap": true,
  "sourceRoot": "/base/"
 ...
}
// rollup.config.js
import typescript from '@rollup/plugin-typescript';
export default [
 {
  input: './src/test/test_context.spec.ts',
  output: {
    file: './dist/test/test_context.spec.js',
    format: 'es',
    sourcemap: 'inline'
  },
  plugins: [
    typescript({
      tsconfig: './tsconfig.rollup.json'
    })
  ]
}
];