title: Svelte: imported TypeScript files not recognized
body: <p>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 <code>.ts</code> files that are included from a <code>.svelte</code> component.</p>
  <p>I keep getting this error:</p>
  <pre><code>[!] 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';
                 ^
  </code></pre>
  <p>This is my <code>FilesPage.svelte</code> that includes the <code>mapPaths.ts</code> file:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script lang=&quot;ts&quot;&gt;
    import FileList from '~/ui/layouts/file-list/FileList.svelte';
  
    import mapPaths from './utils/mapPaths';
  
    export let paths: string[] = [];
  
    $: mappedPaths = mapPaths(paths);
  &lt;/script&gt;
  
  &lt;FileList paths={mappedPaths} /&gt;
  </code></pre>
  <p>and my <code>mapPaths.ts</code> file:</p>
  <pre><code>import type { PathMapping } from '~/types/path.d';
  
  export default (paths: string[]): PathMapping =&gt; {
    const mapping = paths.reduce(
      (m, path) =&gt; {
        const root = path.replace(/_\d+$/, '');
        m.set(root, (m.get(root) || 0) + 1);
        return m;
      },
      new Map() as Map&lt;string, number&gt;
    );
  
    return Array.from(mapping.entries());
  };
  </code></pre>
  <p>This is my <code>rollup.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>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()
    ]
  };
  </code></pre>
  <p>and for good measure my <code>tsconfig.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;extends&quot;: &quot;@tsconfig/svelte/tsconfig.json&quot;,
    &quot;include&quot;: [
      &quot;src/**/*&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules/*&quot;
    ],
    &quot;compilerOptions&quot;: {
      &quot;strict&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;module&quot;: &quot;es2020&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;paths&quot;: {
        &quot;~/*&quot;: [
          &quot;src/*&quot;
        ]
      }
    }
  }
  </code></pre>
  <p>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 <code>alias</code>).</p>
  <p>Any help is greatly appreciated as I am going mildly insane with a build that refuses to work.</p>