4

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"]
}
Mitchell
  • 421
  • 2
  • 5
  • 6

1 Answers1

-6

Not exactly the same problem I encounter.

But either, try to install vite globally.

But the best option, will be to uninstall your current node version (and clean the global node_modules...), then install the latest node version, actually node 17.

Kick Buttowski
  • 6,709
  • 13
  • 37
  • 58
Kamado Tanjiro
  • 1