Anton Ödman
Anton Ödman

Reputation: 541

Cannot find module [...] or its corresponding type declarations (js2307) when importing from "$lib" with SvelteKit

Using the latest SvelteKit (1.0.0-next.401) I have a problem importing components from lib using the $lib syntax. I get an error and a red squiggly line (even though the import and web app works fine).

enter image description here

The error message is as follows:

Cannot find module '$lib/components/shared/header.svelte' or its corresponding type declarations. js(2307)

If a use a relative path, the error disappears.

Upvotes: 13

Views: 29374

Answers (5)

Yifan Sun
Yifan Sun

Reputation: 832

I resolved this problem by removing all the path definitions from tsconfig.json files.

Upvotes: 1

MiK
MiK

Reputation: 1

I had the same issue with my next.JS project and it has gone after restarting VS code.

Upvotes: 0

fcrozatier
fcrozatier

Reputation: 721

This is how I usually solve these errors:

  • Run npm run check to help the compiler figure out where things are.
  • If it doesn't work reload the code editor can help
  • If all the above fails then try npm run build

Upvotes: 23

JAstuccio
JAstuccio

Reputation: 1580

I was getting this error in VS Code. After closing and reopening VS Code the error is gone.

Upvotes: 11

Dana Woodman
Dana Woodman

Reputation: 4522

A few things to try:

  1. Make sure the file name case is correct (is it header.svelte or Header.svelte?)
  2. If you are using an older version of Kit, you may need to run npm run prepare if you've recently created src/lib.
  3. Have a look at .svelte-kit/tsconfig.json (or jsconfig.json) and make sure you see path aliases for $lib.

Upvotes: 1

Related Questions