Could not find a declaration file for module 'classnames'

Viewed 2633

When I trying import cn from 'classnames' I see this error:

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 and creating .d.ts file with declare module 'classnames'; from error-log not helping

The other variants like npm install -D @types/module-name or npm install @types/module-name from StackOverflow are also not so much helpful. After them I see another error:

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.

Another variant I tried - npm i -D @types/classnames. It proceeds but also does not help

My 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"
  ]
}

My 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"
    }
}

What should I do? Please not beat if it is too easy problem

1 Answers

It was just an obvious error:

<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',
    })}
>
Related