20

I noticed not too long ago, whenever I try to start my app, I receive plenty of Cannot find name 'require' and Cannot find type definition file for 'node' and a Cannot find type definition for 'react-router'

Some solutions I have already tried are:

1) adding a types: ["node"] in my tsconfig.json, as you all can see below.

2) adding @types/node in my package.json, which you all can see here.

3) removing node_modules and re yarning, to no avail. I've also deleted yarn.lock as well and the issue persists.

4) Adding a typeRoots: ["node_modules/@types/node"], which didn't seem to do much.

// Package.json 
"devDependencies": {
    "@types/lodash": "^4.14.110",
    "@types/node": "^10.12.18",
    "@types/react": "16.3.12",
    "@types/react-dom": "15.5.0",
    "@types/react-router": "4.0.11",
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "1.0.0",
    "extract-text-webpack-plugin": "2.0.0-beta.4",
    "html-webpack-plugin": "2.24.1",
    "react": "15.5.4",
    "react-dom": "15.5.4",
    "react-router-dom": "4.1.1",
    "rimraf": "2.6.2",
    "style-loader": "0.22.1",
    "ts-loader": "1.2.1",
    "typescript": "3.2.2",
    "url-loader": "1.0.1",
    "webpack": "2.2.0",
    "webpack-dev-server": "1.16.2"
  }

//tsconfig.json (at root level)
{
    "compilerOptions": {
    "baseUrl": "./",
    "target": "es2016",
    "pretty": true,
    "module": "commonjs",
    "sourceMap": true,
    "jsx": "preserve",
    "outDir": "./dist/",
    "noImplicitAny": false,
    "preserveConstEnums": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "types": ["node"],
    "paths": {
      "*": ["node_modules/@types/*", "*"]
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

The above tsconfig and package.json combination yield the following errors:

ERROR in ./src/index.tsx
(5,1): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

ERROR in /Users/johnli/Documents/portfolio/tsconfig.json
error TS2688: Cannot find type definition file for 'node'.

Some odd behavior that I noticed is that adding types: ["node"] will erase my Cannot find type definition file for 'react-router' but not for node. Adding react-router produces the error for both node and react-router, and removing the types attribute entirely also yields an error for both node and react-router.

I would like to refrain from using declare var require: any as the solution, since that doesn't resolve the heart of the issue and more of a patch.

Some more information should it be useful: node version is 11.6.0 and yarn version is 1.13.0

Any other suggestions to get this working? I can't seem to find any other solutions aside from the ones I tried above. I can also supply more information should that be needed. Thanks all!

john.zli
  • 511
  • 2
  • 4
  • 13
  • Try npm install @types/node --save-dev – AConsumer Jan 17 '19 at 09:16
  • you have not included types in compiler options in tsconfig.json – AConsumer Jan 17 '19 at 09:19
  • types exists in the tsconfig.json, and @types/node exists in package.json so they have been added. – john.zli Jan 17 '19 at 09:42
  • I found the solution however; it was a webpack solution; upgrading from webpack 2.0.0, as well as all the plugins happened to fix it for me. – john.zli Jan 17 '19 at 09:42
  • I have this problem. Please let me know what version webpack and plugins do I need to use? Thank you. – Jie Hart Apr 29 '19 at 23:08
  • In case anyone else lands on this question while searching for this problem, [this answer](https://stackoverflow.com/a/55811066/982257) on a different question was the solution for me. – Iguananaut Nov 22 '19 at 16:12

2 Answers2

40

Run

npm install @types/node --save-dev

and in tsconfig file add: -

     {
      "compilerOptions": {
        "types": ["node"]
      }
    }
AConsumer
  • 2,461
  • 2
  • 25
  • 33
  • thanks, unfortunately that is what I've done (see the package.json and tsconfig snippet). It looks to be a webpack issue. – john.zli Jan 17 '19 at 09:45
3

I managed to fix this;

I was on very old webpack versioning; upgrading to webpack 4, ts-loader to v5, and after upgrading other webpack plugins, I was able to fix this compilation issue.

One thing that tipped me off that it might have been webpack was that VSCode was able to see the node typings perfectly fine, yet the old webpack compilation would still show these errors.

john.zli
  • 511
  • 2
  • 4
  • 13