0

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"
}
maja
  • 697
  • 5
  • 18

1 Answers1

1

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

Milad
  • 61
  • 7
  • yes, I ran `yarn install`, I have a `.yarn/cache` folder and an `node_modules` folder – maja Mar 28 '23 at 12:05
  • I'll accept this because if I use `npm install` instead of yarn it just works... no idea what's going on – maja Mar 28 '23 at 12:30
  • try to clear yarn cache and test again. `yarn cache clean` and if there is `yarn.lock` file remove it `rm yarn.lock` – Milad Mar 28 '23 at 12:58
  • I had already tried several times removing everything and starting over – maja Mar 28 '23 at 14:32
  • I also tried to use `yarn plugin import typescript`, but the result was the same – maja Mar 28 '23 at 14:32