svelte-preprocess: cant import svelte component in typescript.

I tried to import a javascript file.

<script lang="typescript">
    import {Table, Th, Tr, Pagination} from '../../index.js'
</script>

index.js:

import Table from '../routes/_components/STable.svelte'
import Th from '../routes/_components/STh.svelte'
import Tr from '../routes/_components/STr.svelte'

export {
  Table, Th, Tr
}

but it gives error: 'Table' is not defined, 'Th' is not defined etc

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (5 by maintainers)

Most upvoted comments

Ahh, I see. That’s happening because you’re importing it via a import ... from './_form.ts'. Your bundler, in this case webpack, should be configured to handle typescript imports (via ts-loader i.e). svelte-preprocess only adds support for using typescript inside a component’s <script> tag.

You need to install ts-loader and add it to the client and server rules
Create a tsconfig.json and add svelte to the types array:

{
	"compilerOptions": {
		"types": ["svelte"],
	}
}

And it should start working.

+13

kaisermann on Oct 31, 2019

Hi @kaisermann, I have the same issue of not being able to import from .ts files inside <script lang="typescript"> tag. I am using Rollup. I can now use .ts files after installing “@rollup/plugin-typescript”. Have you seen this behavior before?

fhassis on Apr 18, 2020

Thank you. you are great!

kapilpipaliya on Oct 31, 2019