Typescript import inside Svelte component raises error

[nick-lehmann]

Very nice work, highly appreciate this very minimal and sleek template 👍🏻

This issue is probably not directly related to this template, but it occurs using it. Importing a .ts file from another .ts file works just fine.

src/utils.ts

export function greeter(): string {
    return "Hello world"
}

src/index.ts

import Svelte from './index.svelte'
import { greeter } from './utils'

console.log(greeter())

new Svelte({
  target: document.body
})

However, if I do the import in a Svelte component, the compiler raises an error that it cannot find the module.

src/index.svelte

<script lang="ts">
  import { greeter } from './utils'
  console.log(greeter())
  
  const a: string = "Svelte",
    b: string = "Typescript",
    c: string = "Rollup";
</script>

<style lang="scss">
  [...]
</style>

<h1>{a} + {b} + {c}</h1>

It errors with the following message:

25 - error TS2307: Cannot find module './utils'.
3 import { greeter } from './utils'

However, it seems to have no effect at all. The application is still running and gets updated. The error also only occurs when saving the .svelte file. If I save a .ts file, nothing happens even if the import that causes the error is still present.

This errors also occurs with this similar template, but not with your rollup template.

I am not very experienced in javascript and setting up all those tools. Therefore, I wanted to ask if you know if this might be a problem with parcel-bundler, parcel-svelte-plugin or with svelte-preprocess?

[dafn]

Hi there. Sorry for the (very) late response. I have been quite busy lately.

I managed to replicate the issue. This is most likely not an issue with svelte-preprocess as I noticed the intellisence is working, and it works fine in the rollup template.

My guess is that parcel-bundler is the problem as it has and similar problems with typescript before. I do not have an immediate fix to this and it needs to be further investigated.

Btw: as there is no official typescript support for svelte and parcel has a zero-config approach, problems like this one may pop up from time to time, and there may not be any easy fix. The rollup template is more flexible when it comes to these things.

[nick-lehmann]

Ok, still thank you very much for the response 👍🏻 I continued with the rollup template and everything works like a charm, very nice work!

I guess problems like this might be fixable when parcel 2 is finally released and allows configuration. Since I am still very interested in using parcel with svelte I would keep this issue open and come back to it when parcel 2 is released.

[rondonjon]

I am having a similar problem here, but I am trying to import local files, and the error message is more descriptive in this case:

/home/user/project/components/category/MyComponent.svelte:4:28 - error TS2307: Cannot find module '../../types/Whatever'

It seems that, inside .svelte files, the compiler is missing the src/ part of the path. The (initially already broken) path category/MyComponent.svelte, extended by ../../types/Whatever, remains invalid, and of course the compiler can't locate an actual file there.

My first idea was that this might be caused by the baseUrl: "." inside tsconfig.json, but changing it to src didn't solve the problem.