How to get rid of the "@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps." warning?

Question

I get this warning every time I build for production. When I build for production I disable source maps in the rollup output config.

output: [{ dir: "...", format: "...", sourcemap: isProd ? false : true }]

I use the same tsconfig for dev and production, tsconfig.json:

    {
      "compilerOptions": {
        // Output
        "target": "ESNext",
        "module": "ESNEXT",
        "sourceMap": true,
        "jsx": "react",
        "noEmit": true,
        // Compile time code checking
        "strict": true,
        // Libraries
        "lib": ["dom", "esnext"],
        // Imports
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true
      },
      "exclude": ["dist", "app"]
    }

I understand that this is the reason for the warning from looking at the rollup plugin source code:

    /**
     * Validate that the `compilerOptions.sourceMap` option matches `outputOptions.sourcemap`.
     * @param context Rollup plugin context used to emit warnings.
     * @param compilerOptions Typescript compiler options.
     * @param outputOptions Rollup output options.
     * @param autoSetSourceMap True if the `compilerOptions.sourceMap` property was set to `true`
     * by the plugin, not the user.
     */
    function validateSourceMap(context, compilerOptions, outputOptions, autoSetSourceMap) {
        if (compilerOptions.sourceMap && !outputOptions.sourcemap && !autoSetSourceMap) {
            context.warn(`@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.`);
        }
        else if (!compilerOptions.sourceMap && outputOptions.sourcemap) {
            context.warn(`@rollup/plugin-typescript: Typescript 'sourceMap' compiler option must be set to generate source maps.`);
        }
    }

But I would prefer to not add the complexity of one tsconfig for dev and another for production.

What would be a good way to get rid of this warning?

Symbiosis

Answer 1

Use a base tsconfig and add only the options that are different to dev and prod versions, as reference see:

https://github.com/microsoft/TypeScript/issues/9876

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends

Symbiosis

Disable sourcemaps with "sourceMap": true setting; also mind the base config if you're extending one. – Trichloroethylene

This worked nicely for me: typescript({tsconfig: production? "./tsconfig.prod.json" : "./tsconfig.json",}) – Firkin

Answer 2

In my case, I was using the official Svelte starter template, with TypeScript integration.

In my case, I didn't need to change my tsconfig from the default one extended by the template (which had "sourceMap": true,); I just needed to change the output.sourcemap setting in my rollup.config.js to make it consistent with the options I'd passed into the typescript() plugin:

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.ts',
    output: {
//      sourcemap: true, // <-- remove
        sourcemap: !production,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            preprocess: sveltePreprocess({ sourceMap: !production }),
            compilerOptions: {
                dev: !production
            }
        }),
        css({ output: 'bundle.css' }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        typescript({
            sourceMap: !production,
            inlineSources: !production
        }),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

Aruabea