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

Question

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).

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.

Tallula

Please do not screenshot code. If you need to indicate editor errors, try to describe it in the text or insert comments in the code that point to the location. – Borchardt

Do you have the latest Svelte extension? You also might want to include your jsconfig.json/tsconfig.json and .svelte-kit/tsconfig.json, usually the former references the latter and the latter includes the $lib path definitions. – Borchardt

it seems to work sporadically, and I am not sure what's causing it. Svelte extension is at latest. The problem only occured in the __layout.svelte file before. – Duffey

Answer 1

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

Tyner

This totally works. Restarting VSCode didn't work, but the npm run check fixed it! – Quahog

Thanks! Running the npm run check command was the fix for me, when developing through a docker container with local files mounted.. i of course need to update my local .svelte-kit folder with the newest files and this will of course not happen automatically, when running a docker container. – Chaffee

This solves my issue when trying to import module to svelte – Creatine

Answer 2

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

Scrip

This did not work for me. Do you have anything related to $lib in your tsconfig.json file? – Ebonee

⇧⌘P + Developer: Reload Window did it for me – Oleaceous

Answer 3

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.

Vegetation

Answer 4

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

Wholly

Answer 5

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

Tsosie