Search code examples
typescriptgulpbrowserifytsify

Missing TypeScript typings with browserify + babelify + tsify

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...

Solution

  • 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.