Can't resolve typescript class

[Marcus-Rise]

// src/App.svelte

<script lang="typescript">
    import {Pet} from "./models/Pet";

    export const pet = new Pet(3);
</script>

<template lang="pug">
    p {pet.height}
</template>

// src/models/Pet.ts

export class Pet {
    constructor(readonly height = 2) {
    }
}

Logs

bundles src/main.js → public/build/bundle.js... [!] Error: Could not resolve './models/Pet' from src/App.svelte Error: Could not resolve './models/Pet' from src/App.svelte at error (/home/ilya/WebstormProjects/room-scheme/node_modules/rollup/dist/shared/node-entry.js:5400:30) at ModuleLoader.handleResolveId (/home/ilya/WebstormProjects/room-scheme/node_modules/rollup/dist/shared/node-entry.js:12410:24) at ModuleLoader. (/home/ilya/WebstormProjects/room-scheme/node_modules/rollup/dist/shared/node-entry.js:12298:30) at Generator.next () at fulfilled (/home/ilya/WebstormProjects/room-scheme/node_modules/rollup/dist/shared/node-entry.js:38:28)

// tsconfig.json

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/*"
  ],
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "types": [
      "svelte"
    ]
  }
}

// rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import preprocess from "svelte-preprocess";

const production = !process.env.ROLLUP_WATCH;

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

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

[Marcus-Rise]

package.json

{
"devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@rollup/plugin-commonjs": "11.0.2",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "dart-sass": "^1.25.0",
    "pug": "^2.0.4",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "sass": "^1.26.5",
    "svelte": "^3.0.0",
    "svelte-preprocess": "^3.7.4",
    "typescript": "^3.8.3"
  },
  "dependencies": {
    "bootstrap": "^4.4.1",
    "sirv-cli": "^0.4.4"
  }
}

[Marcus-Rise]

If i use js class like this:

export class Pet {
    constructor(height = 2) {
        this.height = height;
    }
}

it's working

but typescript classes can't be imported

[fhassis]

I had the same problem. I could solve this by using a typescript loader in the project. I tried both Rollup and Webpack, and I had a better experience with ts-loader in Webpack. I have a template example here: https://github.com/fhassis/web-typescript/tree/svelte-typescript , in the branch "svelte-typescript". It is able to do what you want, but I am having the same issue of #144.

[dionysiusmarquis]

If you want to import .ts files you need to add @rollup/plugin-typescript and place typescript() everywhere right after commonjs(). The preprocess only handles <script lang="typescript"> inside .svelte/.html

[benmccann]

This looks like it might be a duplicate of https://github.com/sveltejs/svelte-preprocess/issues/159. I wonder if you add a .ts to the end of the import statement if it will work

[kaisermann]

Fixed in v4 as we're now only transpiling ts to js. Import resolution should be configured from the bundle side 😁 .