Cannot find module XYZ or its corresponding type declarations.ts(2307)

[geongeorge]

What version of astro are you using?

2.5.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

I have installed this package, but vscode throws an error when I import it in astro components, but it is working fine inside TSX files. See the screenshots below.

Link to Minimal Reproducible Example

https://github.com

Participation

• [ ] I am willing to submit a pull request for this issue.

[natemoo-re]

Thanks for opening an issue! This seems to be related to our VS Code extension rather than astro itself. I'm moving this issue to the https://github.com/withastro/language-tools repository.

We'll need to know what version of the Astro VS Code extension and what version of TypeScript you are using.

Also, please be sure to always include a minimal reproduction. It saves our maintainers time and helps us fix your issue faster!

[shishkin]

I'm having issues in in a project on Astro VS Code extension v2.0.18:

It complains about all *.astro imports in the project, though everything (build, check, dev) works fine from CLI.

In the screenshot I'm showing an aliased import, but the problem persists for all imports, also relative ./other.astro files.

Update: I notices that the issue is only present with TypeScript module resolution set to node16 or nodenext. I'm using TypeScript 5.1.6.

[Princesseuh]

I unfortunately cannot debug OP's issue since there's no reproduction, but as for it not working with moduleResolution node16/node ext, it's an upstream issue in Volar

[arpadgabor]

Experiencing a similar issue with .astro files. On vscode startup everything looks good, but when I create a new component file it no longer loads it inside intellisense until I restart vscode again. Astro runtime and builds are working fine. Will try to share a repro as soon as I can, but for reference, I'm in a pnpm monorepo + moduleResolution bundler.

[Princesseuh]

Experiencing a similar issue with .astro files. On vscode startup everything looks good, but when I create a new component file it no longer loads it inside intellisense until I restart vscode again. Astro runtime and builds are working fine. Will try to share a repro as soon as I can, but for reference, I'm in a pnpm monorepo + moduleResolution bundler.

What version of the extension are you using? Most of these issues should've been fixed in the last version (2.1.3)

[torn4dom4n]

Experiencing a similar issue with .astro files. On vscode startup everything looks good, but when I create a new component file it no longer loads it inside intellisense until I restart vscode again. Astro runtime and builds are working fine. Will try to share a repro as soon as I can, but for reference, I'm in a pnpm monorepo + moduleResolution bundler.

What version of the extension are you using? Most of these issues should've been fixed in the last version (2.1.3)

I have the same issue. I'm using Astro v2.10.3 and this is my repo. Everything works fine although it says cannot find module

[joshuaaron]

Have a similar issue. Using the astro vscode extension v2.3.3, astro v3.1.0. Can replicate with/without moduleResolution set to nodenext/node16 and .astro files are not working whereas .tsx are:

[happypath-digital]

Same issue, I disabled the official Astro VS code extension and used a different one. Problem went away

[valler]

I have the same issue and created a repro repo.

A minimal build on my end requires a vite resolve alias and no tsconfig.json at all.

I need a tsconfig.json with configured paths, if i want to type-check with astro check, and it works just fine.

I also have projects where the error does not occur. As of now I can't explain why it is working in some projects but not in others.

Edit:

Fixed it by including astro files in the tsconfig.json. I commited the fix in the repro repo.

[SeaRoll]

Anyone still with this issue? I've literally tried everything including having the astro files in include, but still error. it seems to be fine if it's like one level down from src, but as soon as it's deeper than that, it fails. It seems to be working again if restarting vs code, but it's really annoying and thinking of just switching to something else if this prevails.

[roybarber]

I had this issue when defining paths in my tsconfig.

To fix use a dot for baseUrl not a slash

heres a copy of my tsconfig.json

{
	"extends": "astro/tsconfigs/base",
	"compilerOptions": {
		"strictNullChecks": true,
		"allowJs": true,
		"baseUrl": ".",
		"paths": {
			"@/*": [
				"src/*"
			],
			"@components/*": [
				"src/components/*"
			],
			"@assets/*": [
				"src/assets/*"
			],
			"@layouts/*": [
				"src/layouts/*"
			],
			"@css/*": [
				"src/styles/*"
			],
			"@lib/*": [
				"src/lib/*"
			]
		},
		"jsx": "preserve"
	}
}

[frontendkris]

I fixed all TS errors related to .astro files by upgrading typescript in my project to the latest version (4.4 to 5.4). Check out if you also have it outdated. :)

[Psypher1]

I had this issue when defining paths in my tsconfig.

To fix use a dot for baseUrl not a slash

heres a copy of my tsconfig.json

{
	"extends": "astro/tsconfigs/base",
	"compilerOptions": {
		"strictNullChecks": true,
		"allowJs": true,
		"baseUrl": ".",
		"paths": {
			"@/*": [
				"src/*"
			],
			"@components/*": [
				"src/components/*"
			],
			"@assets/*": [
				"src/assets/*"
			],
			"@layouts/*": [
				"src/layouts/*"
			],
			"@css/*": [
				"src/styles/*"
			],
			"@lib/*": [
				"src/lib/*"
			]
		},
		"jsx": "preserve"
	}
}

I am still getting this issue, and my tsconfig looks exactly like this. I am running astro 3.2.4 and no typescript

[Princesseuh]

I believe there's a lot of confusion here on what this issue is, some people are encountering this because Astro files are not included in their TypeScript project, which well, makes a lot of sense (we could most likely warn when that happens, for sure!), but is not really a bug.

Other are encountering this because they're using moduleResolution: 'node16' which, while it seems to work now, also is the wrong option to use with Astro. The files in (most parts) of your Astro projects are handled by a bundler, as such you should always be using moduleResolution: 'bundler' (which is what is included in all our presets)

I'll close this issue for now, since the node16 case has been resolved. If this happens again, please open another issue (with a reproduction.)

[Wuzoobia]

This is what worked for me after hours of searching...

This Throws the Error import Box from '@mui/material/Box'; import { openAISolutionsText } from './openaiSolutions'; import { tables } from './touchy/tables';

This also threw the Same Error import Box from '@mui/material/Box'; import { openAISolutionsText } from '@/openaiSolutions'; import { tables } from '@touchy/tables';

This Fixed It. import Box from '@mui/material/Box'; import { openAISolutionsText } from '@/lib/touchy/openaiSolutions'; import { tables } from '@/lib/touchy/tables';

adding the file path fixed it for me....