reactjs - VSCode - แม่แบบ TypeScript "ไม่พบชื่อ "

อัปเดต 1: ฉันสังเกตเห็นว่าข้อผิดพลาดนั้นเกิดขึ้นเฉพาะกับไฟล์ .tsx แรกที่เปิดใน VSCode ไม่ว่าไฟล์ใดจะถูกเปิดก่อน IntelliSense จะทำงานแล้วจึงแสดงข้อผิดพลาด ไฟล์อื่น ๆ ทำงานได้ปกติ

ฉันได้ทำการติดตั้ง VSCode และ Node ใหม่ จากนั้นฉันก็รัน npx create-react-app my-app-test --template typescript โครงการเก่าที่เคยใช้งานได้เมื่อ 2 สัปดาห์ที่แล้วก็มีข้อผิดพลาดนี้ด้วย ซึ่งก่อนหน้านี้ไม่เคยเกิดขึ้น

บางครั้งมันใช้งานได้ แต่ปัญหาก็ยังคงอยู่เมื่อฉันสร้างไฟล์ใหม่ การรีโหลด VSCode ไม่ได้แก้ปัญหา และข้อผิดพลาดกลับไปยังไฟล์ที่เคยใช้ได้

เมื่อโค้ดถูกคอมไพล์ จะไม่มีข้อผิดพลาดใดๆ อย่างไรก็ตามฉันได้รับข้อผิดพลาดต่อไปนี้ใน vscode

ไม่พบชื่อ 'div'.ts(2304)

มันควรจะเป็นอะไร

สิ่งที่ฉันได้ลอง:

• ติดตั้ง vscode, node, npm ใหม่
• เปลี่ยนเวอร์ชัน TypeScript ใน VSCode
• ไดเร็กทอรีที่แตกต่างกันบนคอมพิวเตอร์
• ล้างแคชของ npm
• รัน vscode โดยไม่ใช้ส่วนเสริม

เวอร์ชัน :

• tsc -v -> เวอร์ชัน 5.4.4
• node -v -> v20.12.1
• vscode -> 1.88
• vscode tsc -> 5.4.3
• ระบบปฏิบัติการ -> วินโดวส์ 10

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@mui/material": "^5.15.14",
    "@reduxjs/toolkit": "^2.2.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.94",
    "axios": "^1.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^18.2.74",
    "@types/react-dom": "^18.2.24",
    "typescript": "^4.9.5"
  }
}

คำตอบ #1

คุณต้องการการประกาศประเภท

วิ่ง :

npm install -D @types/react @types/react-dom

หรือเทียบเท่าในตัวจัดการแพ็กเกจที่คุณชื่นชอบ