Definitelytyped: Cannot find module 'csstype'

Created on 7 Apr 2018  ·  21Comments  ·  Source: DefinitelyTyped/DefinitelyTyped

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

Most helpful comment

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 https://github.com/microsoft/dtslint/issues/226 )

All 21 comments

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 https://github.com/microsoft/dtslint/issues/226 )

I had this error as well.

moduleResolution: true gives me errors - and isn't listed in the docs as a valid value - but setting moduleResolution: "node" looks like it has done the job 👍 Thanks!

Sorry, I meant to say "node" 😆 Changed my comment. Glad it helped.

Set "moduleResolution": "node" is useful for me, too.

Thanks Frenic. Works for me as well.

Can anyone provide color on why? Is there an update that would make setting this unnecessary?

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)

"module": "commonjs" fixed this issue for me, try it.

For those using classic module resolution who _don't_ want to change to node module resolution, I was able to get around this problem by adding a paths entry for csstype in my tsconfig.json, since my project is using the baseUrl config option. See baseUrl documentation for more details.

Obviously, this is not a scalable approach if you have many conflicts like this, but this was our first and this has at least bought us some time if we want to consider switching over to node module resolution.

I was running into this as well.

Via WebPack + TypeScript

Module not found: Error: Can't resolve 'csstype' 

What fixed it for me, which is likely pretty hackey, but as of TS 2.9 you can import() types (https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#import-types), so I did this and it compiles now without complaint:

type VisibilityProperty = import('csstype').VisibilityProperty;
type AnimationProperty = import('csstype').AnimationProperty;

Hi. Thanks for the suggestion here of setting compilerOptions.moduleResolution: "node".
However unfortunately, the moduleResolution is already set as "node" when I created the project using create-react-app-typescript but I am still seeing the problem.

I will keep on checking but would be great if someone already knew the answer and can tell me how to fix it :-)

UPDATE: sorry it is my bad setting - there is an tsconfig.test.json that has module set as commonjs and adding "moduleResolution": "node" seems to have fixed it.

I am checking out types/react-tag-autocomplete and running npm run lint react-tag-autocomplete. Getting same error, error TS2307: Cannot find module 'csstype'.

After adding "moduleResolution": "node", in compilerOptions of react-tag-complete's tsconfig.json, it gives error: Error: Unexpected compiler option moduleResolution.

Any help?

This drove me nuts trying to author a type definition that depended on react. It turns out that the csstype library has its own TS definitions, which are thus not present in the /types directory of this repo. I created an issue in dtslint to address this:

https://github.com/Microsoft/dtslint/issues/226

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

@Rahul-Sagore I'm getting the same error as you. Did you ever figure out how to resolve this?

@mcmar Nope.

@Rahul-Sagore I'm getting the same error as you. Did you ever figure out how to resolve this?

You have to install dependencies of types/react and that will work :)

as indicated in this reply https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24788#issuecomment-495861835

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

Same error as @fyodore82 after performing steps 1/2

Solve it by writing "node" with a capital "N":

"moduleResolution": "Node"

Works on our side.

https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Was this page helpful?
0 / 5 - 0 ratings