Various errors when opening a React + Vite template project - user error or bug?

[martycagas]

Hi! I'm posting this as a discussion first, because I'm not sure whether it's a bug or not (and whether I should file an issue), or whether it's simply a user error. I need a second opinion from someone more experienced than me, as I am literally just starting out with Deno/Vite/etc.

Environment

• Windows 24H2
• VS Code 1.102.2
• Deno 2.4.2
• Deno VS Code extension 3.45.0

Steps

I tried setting up the official React + Vite TS template, to a decent success, but with quite a few issues along the way. Granted, I managed to get the default web application served, so that'd lead me to believe this is more of a bug in the extension, than an error on my part.

My steps to reproduce might be overly complicated too, I got there after failing a couple times, breaking my lock file (?), and starting over.

1. Clone the react-vite-ts-template repo.
2. Clean the cache with deno clean.
3. Prior to opening VS Code with the project, navigate to the directory and run deno install, then deno update --latest.
4. Open VS Code, let it download type hints automatically.
5. Run the project with deno run dev.
6. Restart VS Code.

The project gets properly served on the default localhost IP/port.

However, despite it running, I still get quite a few errors in VS Code.

Errors

Running deno check reports:

PS ...> deno check
Check file:///.../client/.vite/deps/chunk-2OHGG6F5.js
Check file:///.../client/.vite/deps/chunk-2YAVCF6E.js
Check file:///.../client/.vite/deps/react-dom.js
Check file:///.../client/.vite/deps/react-dom_client.js
Check file:///.../client/.vite/deps/react.js
Check file:///.../client/.vite/deps/react_jsx-dev-runtime.js
Check file:///.../client/.vite/deps/react_jsx-runtime.js
Check file:///.../client/src/App.tsx
Check file:///.../client/src/main.tsx
Check file:///.../client/src/vite-env.d.ts
Check file:///.../server/main.ts
Check file:///.../server/main_test.ts
Check file:///.../server/util/routeStaticFilesFrom.ts
Check file:///.../vite.config.ts
TS2307 [ERROR]: Cannot find module 'npm:/[email protected]'.

TS2307 [ERROR]: Cannot find module 'npm:/[email protected]'.

Found 2 errors.

error: Type checking failed.

When I open the client/src/vite-env.d.ts file, the "vite/client" portion gets underlined with the error message "npm package "vite@^7.0.6" is not installed or doesn't exist.deno(not-installed-npm)".

Finally, every time I open/switch to a TS file, the Deno Language Server output prints "Failed to resolve npm:[email protected] to a file URL.". I don't know the exact process how the names are resolved, but I certainly have these packages in the node_modules folder. Both in the .deno folder and directly in the react-dom folder that's in the root of node_modules.

Previously, before coming back to the project a few hours later, I had more errors in the editor, but they disappeared since (can't tell you why) so I can't add those here, sadly.

I tried both deno add "npm:/[email protected]" and deno install --reload, but to no success.

Is this maybe a bug in the VS Code extension, given that the project runs, or is there an issue with my steps? Thanks everyone in advance!

[nayeemrmn]

The config file at https://github.com/denoland/react-vite-ts-template/blob/main/deno.json should be amended in the following ways:

• Add "nodeModulesDir": "auto", allowing you to remove --node-modules-dir=auto from the tasks.
• Remove compilerOptions.types.

So it's a bug with the template.

After that, remove deno.lock and node_modules just in case and then deno check should work. You might have to restart the language server after populating node_modules to fix intellisense.

[martycagas]

Thank did the trick! Thanks a lot for the reply... and sorry for putting the question here, it wasn't in the extension after all... 😅