Search code examples
typescriptgulpweb-worker

Compiling typescript web worker works from command line but not from gulp


I have a web worker written in typescript. It compiles fine from the command line. However when I try to compile it in Gulp, I get weird type errors:

/.../node_modules/@types/hls.js/index.d.ts(357,17): error TS2304: Cannot find name 'SourceBuffer'.
/.../node_modules/@types/hls.js/index.d.ts(1716,27): error TS2304: Cannot find name 'AudioTrack'.
... (more like that)

I have no idea where those types come from; however I assume it has something to do with the node_modules/@types in the parent directory (where gulpfile.js runs), but I don't know why the typescript compiler is looking there. The (hopefully) relevant parts of my gulpfile are:

const ts = require('gulp-typescript');
const tsWorkerProject = ts.createProject('src/app/workers/tsconfig.json');
// stuff...
const compileWorkers = (done) => {
  return tsWorkerProject.src()
    .pipe(tsWorkerProject())
    .js.pipe(gulp.dest(paths.dist))
    .on('error', err => {
      console.error(err.toString());
      done(err);
    });
}; 
// more stuff...

I have tsconfig.json inside the worker directory:

{
  "compilerOptions": {
    "lib": ["webworker", "ScriptHost", "ES2018"],
    "importHelpers": true,
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "inlineSources": true,
    "diagnostics": true,
  },
  "files": ["./*.ts"],
}

Solution

  • The answer, it turns out, is to include an empty types array under compilerOptions. My working tsconfig.json looks like:

    {
      "compilerOptions": {
        "lib": ["webworker", "scripthost", "ES2015"],
        "importHelpers": true,
        "target": "es2015",
        "jsx": "react",
        "sourceMap": true,
        "inlineSources": true,
        "diagnostics": true,
        "types": [],
      },
      "files": ["./*.ts"],
    }