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.

Eternal

For those interested I posted the issue here: github.com/sveltejs/rollup-plugin-svelte/issues/171 – Eternal

That syntax is valid Typescript (and is reccommended if you want to inport only the types exported by that file) so when it throws an error it means that Typescript is not working, So no changing the syntax is not the solution unfortunately. – Eternal

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.

Lecture

Thank you for your answer. I have dropped the Rollup Config and just stuck with webpack as that works. I am not sure updating the Typescript will work either since it works with webpack. I will however look more into it when I get a chance. Thanks. – Eternal

I will check you answer when I can, but I am not sure it is what I search for. – Eternal

Thanks. It has solved the problem for me. (Svelte:3.37.0 , Rollup:2.45.2). – Morrison