javascript - Typescript Cannot find offscreencanvas

I am attempting to move a Three.js project to TypeScript. When I tried top pile it I would get an error referenced in this issue on the Three.js repo:

.js/issues/17698

Following those steps I installed @types/offscreencanvas as well as edited my tsconfig.json, but now I get this output when trying to run tsc:

node_modules/@types/offscreencanvas/index.d.ts(16,53): error TS2304: Cannot find name 'CanvasState'.
node_modules/@types/offscreencanvas/index.d.ts(16,66): error TS2304: Cannot find name 'CanvasTransform'.
node_modules/@types/offscreencanvas/index.d.ts(16,83): error TS2304: Cannot find name 'CanvasCompositing'.
node_modules/@types/offscreencanvas/index.d.ts(17,5): error TS2304: Cannot find name 'CanvasImageSmoothing'.
node_modules/@types/offscreencanvas/index.d.ts(17,27): error TS2304: Cannot find name 'CanvasFillStrokeStyles'.
node_modules/@types/offscreencanvas/index.d.ts(17,51): error TS2304: Cannot find name 'CanvasShadowStyles'.
node_modules/@types/offscreencanvas/index.d.ts(17,71): error TS2304: Cannot find name 'CanvasFilters'.
node_modules/@types/offscreencanvas/index.d.ts(17,86): error TS2304: Cannot find name 'CanvasRect'.
node_modules/@types/offscreencanvas/index.d.ts(17,98): error TS2304: Cannot find name 'CanvasDrawPath'.
node_modules/@types/offscreencanvas/index.d.ts(18,5): error TS2304: Cannot find name 'CanvasText'.
node_modules/@types/offscreencanvas/index.d.ts(18,34): error TS2304: Cannot find name 'CanvasImageData'.
node_modules/@types/offscreencanvas/index.d.ts(18,51): error TS2304: Cannot find name 'CanvasPathDrawingStyles'.
node_modules/@types/offscreencanvas/index.d.ts(18,76): error TS2304: Cannot find name 'CanvasTextDrawingStyles'.
node_modules/@types/offscreencanvas/index.d.ts(18,101): error TS2304: Cannot find name 'CanvasPath'.
node_modules/@types/offscreencanvas/index.d.ts(34,53): error TS2304: Cannot find name 'CanvasRenderingContext2DSettings'.
node_modules/@types/offscreencanvas/index.d.ts(36,90): error TS2304: Cannot find name 'ImageBitmapRenderingContext'.
node_modules/@types/offscreencanvas/index.d.ts(49,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(51,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(53,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(58,43): error TS2304: Cannot find name 'ImageBitmapSource'.
node_modules/@types/offscreencanvas/index.d.ts(59,43): error TS2304: Cannot find name 'ImageBitmapSource'.
node_modules/@types/offscreencanvas/index.d.ts(64,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(68,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(72,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(76,26): error TS2304: Cannot find name 'WindowOrWorkerGlobalScope'.
node_modules/@types/offscreencanvas/index.d.ts(76,53): error TS2304: Cannot find name 'WindowEventHandlers'.
node_modules/@types/offscreencanvas/index.d.ts(77,70): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(80,83): error TS2304: Cannot find name 'Transferable'.
node_modules/three/src/renderers/webvr/WebVRManager.d.ts(13,15): error TS2304: Cannot find name 'VRDisplay'.
node_modules/three/src/renderers/webvr/WebVRManager.d.ts(14,21): error TS2304: Cannot find name 'VRDisplay'.

Here is my package.json:

{...
    "dependencies": {
    "@types/webgl2": "0.0.5",
    "offscreen-canvas": "^0.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@types/gsap": "^1.20.2",
    "@types/offscreencanvas": "^2019.6.1",
    "@types/three": "^0.103.2",
    "babelify": "^10.0.0",
    "bootstrap": "^4.4.1",
    "browserify": "^16.5.0",
    "fancy-log": "^1.3.3",
    "gsap": "^3.0.5",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-cssnano": "^2.1.3",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-tap": "^2.0.0",
    "gulp-typescript": "^6.0.0-alpha.1",
    "gulp-uglify-es": "^2.0.0",
    "jquery": "^3.4.1",
    "three": "^0.110.0",
    "tsify": "^4.0.1",
    "typescript": "^3.7.4",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

and my tsconfig.json:

{
    "pilerOptions": {
        "module": "monjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "types": ["webgl2", "offscreencanvas"],
        "lib": [
            "ES2016",
            "DOM",
            "ES2015",
            "ES2015.Iterable"
        ],
        "outDir": "dist/js/projects"
    },
    "file": [
        "src/js/projects/main.js"
    ]
}

I am attempting to move a Three.js project to TypeScript. When I tried top pile it I would get an error referenced in this issue on the Three.js repo:

https://github./mrdoob/three.js/issues/17698

Following those steps I installed @types/offscreencanvas as well as edited my tsconfig.json, but now I get this output when trying to run tsc:

node_modules/@types/offscreencanvas/index.d.ts(16,53): error TS2304: Cannot find name 'CanvasState'.
node_modules/@types/offscreencanvas/index.d.ts(16,66): error TS2304: Cannot find name 'CanvasTransform'.
node_modules/@types/offscreencanvas/index.d.ts(16,83): error TS2304: Cannot find name 'CanvasCompositing'.
node_modules/@types/offscreencanvas/index.d.ts(17,5): error TS2304: Cannot find name 'CanvasImageSmoothing'.
node_modules/@types/offscreencanvas/index.d.ts(17,27): error TS2304: Cannot find name 'CanvasFillStrokeStyles'.
node_modules/@types/offscreencanvas/index.d.ts(17,51): error TS2304: Cannot find name 'CanvasShadowStyles'.
node_modules/@types/offscreencanvas/index.d.ts(17,71): error TS2304: Cannot find name 'CanvasFilters'.
node_modules/@types/offscreencanvas/index.d.ts(17,86): error TS2304: Cannot find name 'CanvasRect'.
node_modules/@types/offscreencanvas/index.d.ts(17,98): error TS2304: Cannot find name 'CanvasDrawPath'.
node_modules/@types/offscreencanvas/index.d.ts(18,5): error TS2304: Cannot find name 'CanvasText'.
node_modules/@types/offscreencanvas/index.d.ts(18,34): error TS2304: Cannot find name 'CanvasImageData'.
node_modules/@types/offscreencanvas/index.d.ts(18,51): error TS2304: Cannot find name 'CanvasPathDrawingStyles'.
node_modules/@types/offscreencanvas/index.d.ts(18,76): error TS2304: Cannot find name 'CanvasTextDrawingStyles'.
node_modules/@types/offscreencanvas/index.d.ts(18,101): error TS2304: Cannot find name 'CanvasPath'.
node_modules/@types/offscreencanvas/index.d.ts(34,53): error TS2304: Cannot find name 'CanvasRenderingContext2DSettings'.
node_modules/@types/offscreencanvas/index.d.ts(36,90): error TS2304: Cannot find name 'ImageBitmapRenderingContext'.
node_modules/@types/offscreencanvas/index.d.ts(49,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(51,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(53,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(58,43): error TS2304: Cannot find name 'ImageBitmapSource'.
node_modules/@types/offscreencanvas/index.d.ts(59,43): error TS2304: Cannot find name 'ImageBitmapSource'.
node_modules/@types/offscreencanvas/index.d.ts(64,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(68,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(72,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(76,26): error TS2304: Cannot find name 'WindowOrWorkerGlobalScope'.
node_modules/@types/offscreencanvas/index.d.ts(76,53): error TS2304: Cannot find name 'WindowEventHandlers'.
node_modules/@types/offscreencanvas/index.d.ts(77,70): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(80,83): error TS2304: Cannot find name 'Transferable'.
node_modules/three/src/renderers/webvr/WebVRManager.d.ts(13,15): error TS2304: Cannot find name 'VRDisplay'.
node_modules/three/src/renderers/webvr/WebVRManager.d.ts(14,21): error TS2304: Cannot find name 'VRDisplay'.

Here is my package.json:

{...
    "dependencies": {
    "@types/webgl2": "0.0.5",
    "offscreen-canvas": "^0.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@types/gsap": "^1.20.2",
    "@types/offscreencanvas": "^2019.6.1",
    "@types/three": "^0.103.2",
    "babelify": "^10.0.0",
    "bootstrap": "^4.4.1",
    "browserify": "^16.5.0",
    "fancy-log": "^1.3.3",
    "gsap": "^3.0.5",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-cssnano": "^2.1.3",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-tap": "^2.0.0",
    "gulp-typescript": "^6.0.0-alpha.1",
    "gulp-uglify-es": "^2.0.0",
    "jquery": "^3.4.1",
    "three": "^0.110.0",
    "tsify": "^4.0.1",
    "typescript": "^3.7.4",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

and my tsconfig.json:

{
    "pilerOptions": {
        "module": "monjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "types": ["webgl2", "offscreencanvas"],
        "lib": [
            "ES2016",
            "DOM",
            "ES2015",
            "ES2015.Iterable"
        ],
        "outDir": "dist/js/projects"
    },
    "file": [
        "src/js/projects/main.js"
    ]
}

Share Improve this question edited Jan 16, 2020 at 5:06 asked Jan 16, 2020 at 3:29 KingOfEphrya 1391 gold badge2 silver badges11 bronze badges

1 What does your typescript code that import these look like? – Automatico Commented Jan 16, 2020 at 6:37
Here is the entry file github./PickleProgramming/tesseract/blob/master/src/js/…. The whole project is pretty massive and is only going to get bigger. You think that the issue could be in the .ts file and not my configuration? If that's the case I think I would rather just use TS elsewhere and keep writing my Three.js project in regular JS. – KingOfEphrya Commented Jan 16, 2020 at 6:43
1 I think it is most likely a config issue. – Automatico Commented Jan 16, 2020 at 6:50
1 Are you running tsc from terminal, or from a script inside package.json? it seems as this might be a typescript version issue. If you are running from terminal the TS version might be different than what is installed in the repo. – Automatico Commented Jan 16, 2020 at 6:59
Ah yes, I think that was it! I can finish pilation without errors now! Thank you very much! – KingOfEphrya Commented Jan 16, 2020 at 7:26

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

As per my ment to your question

This seems to be a TypeScript version problem, but the version in your package.json seems to be correct. Have you tried to run this from a script within your package.json, in stead of through your terminal?

{
  //...
  "scripts": {
    "build": "tsc",
     //...
  },
  //...
}

Then you can run npm run build or yarn build.

I had the same issue with Pixi.js and for me installing @types/offscreencanvas did not help. So I copied definitions from it and pasted them into main.d.ts to fix.

But be warned that definitions can bee outdated at some point if you do that. I did that since I use Lerna monorepo + Angular, so it was hard for me to keep track of a problem, could not find any other solution sadly :(

According to this https://github./aws/amazon-chime-sdk-js/issues/1909, I fixed the issue by adding "types": ["jasmine","offscreencanvas"] in tsconfig file

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Typescript Cannot find offscreencanvas - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)