SolvedDefinitelyTyped Cannot find module 'csstype'

Hi, I am trying to use react with typescript, I installed (react, react-dom), (@types/react, @types/react-dom), in attempt to launch project I get error ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:55:22 Cannot find module 'csstype'. I tried npm i csstype in @types/react and in root of project. Also despite to error, in module @types/react exists folder node_modules/csstype, so I don't even know why this error happens.

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./build/", // path to output directory
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "es6", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allow a partial TypeScript and JavaScript codebase
        
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "./source/**/*.tsx",
        "./source/**/*.ts"
    ]
}

package.json

{
  "name": "suggestion-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "webpack:server": "babel-node node_modules/.bin/webpack-dev-server --mode=development"
  },
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1"
  },
  "devDependencies": {
    "@types/react": "^16.3.5",
    "@types/react-dom": "^16.0.4",
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "caniuse-lite": "^1.0.30000697",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^1.1.11",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^2.1.3",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.1"
  }
}

source/index.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles/main.css';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

OS: Ubuntu 17.10

24 Answers

✔️Accepted Answer

Try compilerOptions.moduleResolution: "node"


(Edit by Orta: If you are seeing this inside DefinitelyTyped, you need to run npm install in the dependency where you are seeing that error. E.g. cd types/react; npm install and then listing should be better - see microsoft/dtslint#226 )

Other Answers:

For me, setting the moduleResolution param didn't work, so I manually performed the solution to which @mike-marcacci had already suggested at the PR he raised at the dtslint repo:

cd types/react
npm i

If compilerOptions.module === "AMD" or "System" or "ES6" the default for compilerOptions.moduleResolution would be "Classic", otherwise it's "Node". So if you use one of these module strategies, but have all your packages under node_modules. The compilerOptions.moduleResolution must be set to "Node".

For Classic:

For non-relative module imports, however, the compiler walks up the directory tree starting with the directory containing the importing file, trying to locate a matching definition file.

For Node:

Node will look for your modules in special folders named node_modules. A node_modules folder can be on the same level as the current file, or higher up in the directory chain. Node will walk up the directory chain, looking through each node_modules until it finds the module you tried to load.

(source)

I also have this issue.

  1. Setting "moduleResolution": "node", give me error Error: Unexpected compiler option moduleResolution

  2. I've tried to

     cd types\react
     npm i
    

Then running npm run lint <my-package> shows me huge amount of errors with csstype like

../react/node_modules/csstype/index.d.ts(2071,31): error TS1005: '(' expected.
../react/node_modules/csstype/index.d.ts(2083,19): error TS2693: 'LetterSpacingProperty' only refers to a type, but is being used as a value here.
../react/node_modules/csstype/index.d.ts(2083,49): error TS1005: '(' expected.
../react/node_modules/csstype/index.d.ts(2096,15): error TS2693: 'LineBreakProperty' only refers to a type, but is being used as a value here.

And several hundreds of similar lines

The "moduleResolution": "Node" solution didn't fix it for me, but going into the /types/react directory and running npm install resolved the issue.

More Issues: