inlineSourceMap config conflicting with fallback svelte-preprocess config

Across 3 editors (VSCode, Emacs (lsp-mode) and Sublime Text (lsp-svelte)) I’m seeing this error in a Svelte component while set up with TypeScript: <script lang="ts"> - [svelte-preprocess] Encountered type error

It doesn’t stop me from compiling or running the code, so it’s a nuisance error, but it’s a red squiggle nonetheless

System Info:

Arch Linux 5.10.54-1-lts svelte-language-server@0.14.4

rollup:

import ts from '@rollup/plugin-typescript'
import sveltePreprocess from 'svelte-preprocess'
import svelte from 'rollup-plugin-svelte'
import scss from 'rollup-plugin-scss'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import filesize from 'rollup-plugin-filesize'

import postcss from 'postcss'
import autoprefixer from 'autoprefixer'
import { terser } from 'rollup-plugin-terser'
import chalk from 'chalk'
import version from 'rollup-plugin-version-injector'

const prod = !process.env.ROLLUP_WATCH
console.log(`Currently running in ${
  prod ? chalk.green('production') : chalk.red('development')
}\n`)

const cssOptions = {
  output: 'assets/bundle.css'
}

export default {
  input: 'src/index.ts',
  output: {
    file: 'assets/bundle.js',
    format: 'iife',
    name: 'bundle',
    sourcemap: prod ? false : 'inline'
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      compilerOptions: {
        hydratable:  true,
        dev: !prod
      }
    }),
    ts({
      inlineSources: !prod,
      inlineSourceMap: !prod
    }),
    scss(!prod && { processor: () => postcss([autoprefixer()]) }),
    css(cssOptions),
    prod && terser(),
    commonjs(),
    resolve({browser: true}),
    prod && filesize(),
    prod && version()
  ],
  watch: {
    clearScreen: false
  }
}

tsconfig:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "lib": ["DOM"],
  "compilerOptions": {
    "types": ["node", "svelte"],
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    "strictNullChecks": true,              /* Enable strict null checks. */
    "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    "noUnusedLocals": true,                /* Report errors on unused locals. */
    "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
    "sourceMap": false,
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

[jasonlyu123]

My bad. Missed that and misunderstood your comment. Found that we have defaulted to enable sourceMap in the internal svelte-preprocess config. So that’s why the error only shows on the editor not build. One workaround is to add a svelte.config.js This should disable the build-in svelte-preprocess config

import sveltePreprocess from 'svelte-preprocess;

export default {
  preprocess: sveltePreprocess()
}

or in commonjs

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess()
};

[trev-dev]

No worries, I miss details while reading and working all the time. It’s also worth mentioning again that if you leave the tsconfig alone and just pass what you want into the typescript rollup plugin, you get no errors and inline maps as well. It goes without saying it’s nicer to have less confusion. Thanks for working with me on this 😃