ERROR in node_modules/three/src/renderers/WebGLRenderer.d.ts(35,31): error TS2304: Cannot find name 'OffscreenCanvas'. node_modules/three/src/renderers/webgl/WebGLUtils.d.ts(3,43): error TS2304: Cannot find name 'WebGL2RenderingContext'.
- An accessor cannot be declared in an ambient context
- Cannot find name 'OffscreenCanvas’
- Cannot find name 'WebGL2RenderingContext’
可以见到主要出现了三种错误:
- An accessor cannot be declared in an ambient context
- Cannot find name 'OffscreenCanvas’
- Cannot find name 'WebGL2RenderingContext’
解决WebGL2RenderingContext及OffscreenCanvas问题
- 需要在tsconfig.app.ts的
types字段增加如下声明:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["webgl2", "offscreencanvas"] // 这里加
},
// ...
"exclude": ["test.ts", "**/*.spec.ts"]
}
- 手动安装对应的包
npm i @types/offscreencanvas --save
npm i @types/webgl2 --save
# 当前默认下会安装如下版本
# "@types/offscreencanvas": "^2019.6.0",
# "@types/webgl2": "0.0.5",
解决An accessor cannot be declared in an ambient context问题
- 原因分析
这是由于已安装的typescript版本和three库所需的typescript版本不一致导致的,已安装的typescript比较旧, 当前为3.5.3.
- 尝试升级typescript
npm uninstall typescript
npm i typescript
# 默认重新安装了3.7.3版本
重新构建的时候发现原有问题不报错了没但是出现了新的问题:
ionic build --prod --release
// ...
Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.7.3 was found instead
说明目前Angular8最新支持的typescript版本要低于3.6? 一开始我就尝试把Angular8升级到刚发布不久的Angular9, 后来发现Ionic4还不支持Angular9, 这就有点尴尬了. IonicFramework 5正式版估计很快就发布了,但是也没看到对于这方面有什么具体说法.
所以暂时用了个临时的方法先解决这个问题, 就是粗暴的先禁用项目对typescript版本的检查,在tsconfig.app.ts中新增的具体配置如下:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["webgl2", "offscreencanvas"]
},
"angularCompilerOptions": {
// ...
"disableTypeScriptVersionCheck": true // 在这里新加了一个配置选项
},
"exclude": ["test.ts", "**/*.spec.ts"]
}
启动后报错 error TS2339
解决 修改tslint配置规则： // tslint.json "no-inferrable-types": [ false, "ignore-params" ],
报错 TS1086: An accessor cannot be declared in ambient context
最后的关键 添加 Setting "skipLibCheck": true in tsconfig.json solved my problem
"compilerOptions": {
"skipLibCheck": true
}
