Error: cannot find module vite, react, react-router-dom

Question

Error

I use yarn create vite command to create a react-ts app and vite as the building tool. After yarn add install the packages, in vite.config.ts file:

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

It gives erros: cannot find module 'vite', cannot find module '@vitejs/plugin-react'. It also appears when I trying to import react, react-router-dom in tsx file. But I am already used yarn install to install all the dependencies that are mentioned in package.json file(I also tried yarn add, didn't work).

Tried Solutions

I tried the following solutions and none of these completely solve the problem:

• use npm install / yarn add the modules that are missing

the error still there.

• create a file xxx.d.ts then declare the modules are missing and include xxx.d.ts in the ts.config.

it can solve the missing module thing but useState and other functions give error.

Though the error is reported by VS Code, but the project can running and it works. So I am wondering if the error relates to config file or ESLint.

file

Here is my package.json:

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.22",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^0.25.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^1.0.7",
    "typescript": "^4.5.4",
    "vite": "^2.8.0"
  }
}

tsconfig.json:

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

tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": ["vite.config.ts"]
}

Answer 1

1. delete the 'node_modules' folder
2. yarn (or npm) install

I couldn't get the Node Modules folder back after 'yarn' and I needed to add a file .yarnrc.yml containing " nodeLinker: node-modules " After that again yarn (or npm) install

That worked for me.