reactjs - ไม่พบไฟล์ประกาศสำหรับโมดูล 'classnames'

เมื่อฉันพยายาม import cn from 'classnames' ฉันเห็นข้อผิดพลาดนี้:

Could not find a declaration file for module 'classnames'. 'C:/Users/Demian/Desktop/udemy/react+next/top-app/node_modules/classnames/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/classnames` if it exists or add a new declaration (.d.ts) file containing `declare module 'classnames';`

npm i --save-dev @types/classnames และการสร้างไฟล์ .d.ts พร้อม declare module 'classnames'; จากบันทึกข้อผิดพลาดก็ไม่ได้ช่วย

รูปแบบอื่นๆ เช่น npm install -D @types/module-name หรือ npm install @types/module-name จาก StackOverflow ก็ไม่ได้ช่วยอะไรมาก หลังจากนั้นฉันก็เห็นข้อผิดพลาดอีกข้อ:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fmodule-name - Not found
npm ERR! 404 
npm ERR! 404  '@types/module-name@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)        
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

อีกตัวแปรที่ฉันทดลอง - npm i -D @types/classnames มันดำเนินการต่อไปแต่ก็ไม่ช่วยเช่นกัน

ไฟล์ tsconfig.json ของฉัน:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

ไฟล์ package.json ของฉัน:

{
    "name": "top-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "debug": "set NODE_OPTIONS=--inspect && next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "stylelint": "stylelint \"**/*.css\" --fix"
    },
    "dependencies": {
        "@types/classnames": "^2.3.1",
        "@types/react-router": "^5.1.16",
        "classnames": "^2.3.1",
        "next": "11.1.0",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-router-dom": "^5.3.0"
    },
    "devDependencies": {
        "@babel/plugin-syntax-jsx": "^7.14.5",
        "@types/react": "^17.0.19",
        "@typescript-eslint/eslint-plugin": "^4.29.3",
        "@typescript-eslint/parser": "^4.29.3",
        "eslint": "^7.32.0",
        "eslint-config-next": "11.1.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^3.4.1",
        "prettier": "^2.3.2",
        "stylelint": "^13.13.1",
        "stylelint-config-standard": "^22.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-order-config-standard": "^0.1.3",
        "typescript": "^4.4.2"
    }
}

ฉันควรทำอย่างไรดี? กรุณาอย่าดุด่าถ้ามันเป็นปัญหาที่ง่ายเกินไป

คำตอบ #1

มันเป็นเพียงความผิดพลาดที่ชัดเจน:

<button
        className={cn(styles.button, {
        [styles.primary]: appearance == 'primary',// I used '=' instead of '=='
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        [styles.ghost]: appearance == 'ghost',
    })}
>