Vite: how can I check the typescript setup of a React app if typechecking starts failing for the whole project

Question

I have a React app created with Vite and using Typescript, but for some reason it seems typechecking broke down and I can't find a state in the previous commits where it would still work.

To give an example, I get errors such as:

Cannot find module 'react' or its corresponding type declarations.

or

Cannot find module '/vite.svg' or its corresponding type declarations. (this is just a default svg placed in the public folder)

What checks can I try to figure out what happened?

---

This is my vite.config.ts (note that all imports are marked with a type definition not found error):

/// <reference types="vitest" />
/// <reference types="vite/client" />

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/utils/test-setup.ts',
  },
})

and my tsconfig.json (with a Cannot find type definition file for 'vitest/globals'):

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["vitest/globals"]
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

this are the dependencies in my package.json (note that I can run commands such as yarn dev or yarn test so the packages were installed correctly):

"dependencies": {
  "mui": "^0.0.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-query": "^3.39.3",
  "react-router-dom": "^6.9.0"
},
"devDependencies": {
  "@testing-library/dom": "^9.2.0",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^14.4.3",
  "@types/react": "^18.0.28",
  "@types/react-dom": "^18.0.11",
  "@types/testing-library__jest-dom": "^5.14.5",
  "@vitejs/plugin-react": "^3.1.0",
  "@vitest/coverage-c8": "^0.29.7",
  "@vitest/ui": "^0.29.7",
  "jsdom": "^21.1.1",
  "typescript": "^4.9.3",
  "vite": "^4.2.0",
  "vitest": "^0.29.7"
}

Answer 1

Are you sure that you install node_modules after creating the project? Vite just init project you need to run npm install command.

Answer 2

In my case the issue was the Yarn version. Yarn 3+ seems not to use the node_modules folder by default and Visual Studio Code complains that it cannot find the modules by underlining all the import paths.

I solved it by adding a .yarnrc.yml file to the root of my project with the following contents:

nodeLinker: node-modules

This will cause yarn install to install the dependencies in the node_modules folder where the Visual Studio Code typescript integration can see them.