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 #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 😁 .