Missing TypeScript typings with browserify + babelify + tsify

741 Views Asked by At

I am trying to migrate an Angular JavaScript (ES5) project to TypeScript 2.0 step by step and must admit I'm very struggling.
So first I changed the index.js to index.ts and used the recommended method of installing typings (npm install --save @types/node) instead of the old typings.json way.

Build setup uses gulp with browserify and now introducing tsify and babelify as suggested here.

browserify

//...
.plugin(tsify)
.transform(babelify, {
      presets: ['es2015'],
      extensions: ['.ts', '.js']
})
//...

tsconfig.json

{
"files": [
    "assets/app/index.ts"
],
"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
}
}

However the build fails with:

TypeScript error: .tmp/public/app/index.ts(4,15): Error TS2304: Cannot find name 'require'.

tsify seems not to copy the installed typings to the output dir, which causes the above error.
Any suggestion on how to solve the problem?

EDIT
Copying the node_modules/@types folder to the root of my C: drive eliminates the error, but I have no idea why...

1

There are 1 best solutions below

3
On BEST ANSWER

In case someone runs into the same problem:

Explictly adding the typesRoot option in tsconfig.json fixed it.

"typeRoots" : ["./node_modules/@types"]

This "should" be the default setting but for some reason it searches for the @types folder under C: drive root.

From TypeScript docs:

If typesRoots is specified, only packages under typeRoots will be included.