svelte: imported typescript files not recognized

Question

I am trying to build an app with Svelte and TypeScript using Rollup and when I try to build my Svelte components I just can't seem to make it compile my .ts files that are included from a .svelte component.

I keep getting this error:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/ui/pages/files-page/utils/mapPaths.ts (1:12)
1: import type { PathMapping } from '~/types/path.d';
               ^

This is my FilesPage.svelte that includes the mapPaths.ts file:

<script lang="ts">
  import FileList from '~/ui/layouts/file-list/FileList.svelte';

  import mapPaths from './utils/mapPaths';

  export let paths: string[] = [];

  $: mappedPaths = mapPaths(paths);
</script>

<FileList paths={mappedPaths} />

and my mapPaths.ts file:

import type { PathMapping } from '~/types/path.d';

export default (paths: string[]): PathMapping => {
  const mapping = paths.reduce(
    (m, path) => {
      const root = path.replace(/_\d+$/, '');
      m.set(root, (m.get(root) || 0) + 1);
      return m;
    },
    new Map() as Map<string, number>
  );

  return Array.from(mapping.entries());
};

This is my rollup.config.js:

import typescript from '@rollup/plugin-typescript';
import nodeResolve from '@rollup/plugin-node-resolve';
import alias from '@rollup/plugin-alias';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';

export default {
  input: 'src/web.ts',

  output: {
    sourcemap: false,
    format: 'iife',
    name: 'app',
    file: 'build/web.js'
  },

  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      emitCss: false
    }),

    alias({
      entries: [
        { find: '~', replacement: 'src' }
      ]
    }),

    nodeResolve({
      dedupe: ['svelte']
    }),

    commonjs(),

    typescript()
  ]
};

and for good measure my tsconfig.json:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/*"
  ],
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "module": "es2020",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  }
}

I have been playing around with the order of the plugins but to no avail. They should be as far as I understand in the recommended order (except for maybe alias).

Any help is greatly appreciated as I am going mildly insane with a build that refuses to work.

Answer 1

I was running into the same issue. It seems to be an intricate bug, but here is what solved it for me. This comment in the rollup github says:

Quick fix for now is to manually set your rootDir compiler option to "src".

So I added this flag to the ts compiler options that go inside the typescript plugin in rollup.config.js (of course, my source directory is also called src, you can change it to fit your directory structure):

plugins: [
    ...
    typescript({
      ...
      rootDir: './src',
    }),
    ...
  ],

Unfortunately I can't guarantee it will work for you too, since it is a quick-fix. The problem seems to be fixed in newer versions of typescript if updating is also an option.