Tfjs: error TS2304

[zzj0402]

To get help from the community, we encourage using Stack Overflow and the tensorflow.js tag.

TensorFlow.js version

"@tensorflow/tfjs-node": "^1.2.9",

Browser version

Google Chrome
Version 77.0.3865.90 (Official Build) (64-bit)

Describe the problem or feature request

30 09 2019 10:51:32.313:INFO [launcher]: Launching browsers Chrome_no_sandbox with concurrency unlimited
30 09 2019 10:51:32.319:INFO [launcher]: Starting browser ChromeHeadless

ERROR in node_modules/@tensorflow/tfjs-core/dist/backends/webgl/canvas_util.d.ts(19,61): error TS2304: Cannot find name 'OffscreenCanvas'.

Code to reproduce the bug / link to feature request

Angular project with Karma and puppeteer:

const process = require("process");
process.env.CHROME_BIN = require("puppeteer").executablePath();

module.exports = function (config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine", "@angular-devkit/build-angular"],
    plugins: [
      require("karma-jasmine"),
      require("karma-chrome-launcher"),
      require("karma-jasmine-html-reporter"),
      require("karma-coverage-istanbul-reporter"),
      require("@angular-devkit/build-angular/plugins/karma")
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require("path").join(__dirname, "../coverage"),
      reports: ["html", "lcovonly"],
      fixWebpackSourcePaths: true,
      thresholds: {
        statements: 100,
        lines: 100,
        branches: 100,
        functions: 100
      }
    },
    reporters: ["progress", "kjhtml"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ["Chrome_no_sandbox"],
    customLaunchers: {
      Chrome_no_sandbox: {
        base: "ChromeHeadless",
        flags: [
          "--no-sandbox",
          "--proxy-bypass-list=*",
          "--proxy-server='direct://'"
        ]
      }
    },
    concurrency: Infinity,
    singleRun: true
  });
};

[kangyizhang]

@zzj0402 can you provide more information? From the error log seems like you are using tfjs in browser and the library can not find Canvas. But from the version information seems like you are using tfjs-node. If you are using the library in browser, you only need to install @tensorflow/tfjs.

[khodjabekova]

@zzj0402 have you solve it? i've got the same issue((

[zzj0402]

@kangyizhang More information on what?

[zzj0402]

@khodjabekova Sorry it has been too long ago. I think I must have solved it somehow. I can look into your code if you need.

[softwaremagico]

@zzj0402 Yes, I would be very grateful if you can explain what is the solution.

[khodjabekova]

@zzj0402 I installed "@tensorflow/tfjs": "^1.3.1",
imported it as usual
import * as tf from '@tensorflow/tfjs'; and run. Then I got error
ERROR in node_modules/@tensorflow/tfjs-core/dist/backends/webgl/canvas_util.d.ts(20,61): error TS2304: Cannot find name 'OffscreenCanvas'.

I found solution here but I don't think that is a best way modifying lib.dom.d.ts file

[xenogew]

Same here, I got the same error.

tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

package.json
{
  "name": "tfjs-object-detection",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@tensorflow-models/coco-ssd": "~2.0.0",
    "@tensorflow/tfjs": "~1.3.2",
    "@tensorflow/tfjs-core": "~1.3.2",
    "@types/offscreencanvas": "^2019.6.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.2",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

I import with this package

import * as cocoSSD from '@tensorflow-models/coco-ssd';

[djimoh5]

I tried installing @types/offscreencanvas. Then when navigating to the file @tensorflow/tfjs-core/dist/backends/webgl/canvas_util.d.ts, Typescript is able to recognize OffscreenCanvas, but for some reason the build still cannot.

So my workaround was just to change the type in the offending line from OffscreenCanvas to "any"

Old:
export declare function createCanvas(webGLVersion: number): OffscreenCanvas | HTMLCanvasElement;

New:
export declare function createCanvas(webGLVersion: number): any;

[irsl]

Same here. Installing @types/offscreencanvas did not help.

[rthadur]

Closing this due to lack of activity, feel to reopen. Thank you