Search code examples
gulpgulp-typescript

gulp-typescript does not emit if there are errors


I am trying to use gulp-typescript and I cannot get it to emit anything if there is any error.

The tsc command, as it is supposed to, emits successfully regardless of errors and I expect gulp-typescript should do the same.

But instead I get this vague error:

Property value can only be string literal, numeric literal, 'true', 'false', 'null', object literal or array literal.
[10:45:09] Using gulpfile ~\Desktop\test\gulpfile.js
[10:45:09] Starting 'default'...
src\script.ts(2,3): error TS2339: Property 'gulp' does not exist on type '{}'.
TypeScript: 1 semantic error
TypeScript: emit succeeded (with errors)
[10:45:09] 'default' errored after 525 ms
[10:45:09] Error: TypeScript: Compilation failed
    at Output.mightFinish (C:\Users\Pouria\Desktop\test\node_modules\gulp-typescript\release\output.js:131:43)
    at C:\Users\Pouria\Desktop\test\node_modules\gulp-typescript\release\output.js:44:22
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Project structure is simple: a tsconfig.json file, a package.json file, a gulpfile.js file and an src folder with a single script.ts file in it.

My tsconfig.json file:

{
    "compilerOptions": {
        "outDir": "./dist",
        "allowJs": true,
        "target": "es2017",
        "lib": [ "es2017" ],
        "noEmitOnError": false,
        "noEmit": fals,
    },
    "include": ["./src/**/*"],
}

My package.json file:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-typescript": "^6.0.0-alpha.1",
    "typescript": "^4.7.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

My gulpfile.js:

var gulp = require('gulp'); 
var ts = require('gulp-typescript');
var tsProject = ts.createProject("tsconfig.json");


gulp.task('default', function(){
    return tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("dist"));
});

My script.ts file:

var v = {};
v.gulp = "does not work";

Result of running npm ls --depth 0:

[email protected] C:\Users\Pouria\Desktop\test
+-- [email protected]
+-- [email protected]
`-- [email protected]

Solution

  • Ok so after delving deep into github issues sections it turns out that gulp actually fails the build on purpose if there are any errors in the process.

    To get around this your gulp file should look like this:

    var gulp = require('gulp');
    var ts = require('gulp-typescript');
    var tsProject = ts.createProject("tsconfig.json");
    
    gulp.task('default', function(){
        return tsProject.src().pipe(tsProject())
            .on("error", () => { /* Ignore compiler errors */})
            .js.pipe(gulp.dest("dist"));
    });
    

    i.e. add the .on("error", () => { /* Ignore compiler errors */}) to handle/ignore the errors.

    I spent many hours trying to figure out what was going on. It is a shame that this behavior is not mentioned anywhere, in tutorials, in getting started pages, in package descriptions, etc.

    This is from typescript official handbook, explaining why typescript compiles even with errors:

    That might be a bit surprising given the fact that tsc reported an error about our code, but this is based on one of TypeScript’s core values: much of the time, you will know better than TypeScript.

    ...

    So TypeScript doesn’t get in your way. Of course, over time, you may want to be a bit more defensive against mistakes, and make TypeScript act a bit more strictly. In that case, you can use the noEmitOnError compiler option. Try changing your hello.ts file and running tsc with that flag.

    So it would be really helpful if it was mentioned somewhere that this stark contrast exists between gulp-typescript and tsc itself.