Typescript Version Changes affects my project

Questions
1

Hi,
I have to move to the typescript version 4.5.2. While trying to change my project to this version, I am facing so many errors with the babylonjs from the file of node_modules/babylonjs/babylon.module.d.ts How to solve this. I have given below some of the errors. Kindly help me on this.

Error: node_modules/babylonjs/babylon.module.d.ts:24692:31 - error TS2304: Cannot find name 'MouseWheelEvent'.

24692         event: PointerEvent | MouseWheelEvent;
                                    ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:24706:31 - error TS2304: Cannot find name 'MouseWheelEvent'.

24706         event: PointerEvent | MouseWheelEvent);
                                    ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:24732:57 - error TS2304: Cannot find name 'MouseWheelEvent'.

24732         constructor(type: number, event: PointerEvent | MouseWheelEvent, localX: number, localY: number);
                                                              ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:24749:57 - error TS2304: Cannot find name 'MouseWheelEvent'.

24749         constructor(type: number, event: PointerEvent | MouseWheelEvent,
                                                              ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:32168:81 - error TS2304: Cannot find name 'OffscreenCanvas'.

32168         static CreateCanvas(width: number, height: number): HTMLCanvasElement | OffscreenCanvas;
                                                                                      ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:40274:162 - error TS2304: Cannot find name 'OffscreenCanvas'.

40274             updateDynamicTexture(texture: Nullable<InternalTexture>, source: ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | OffscreenCanvas, invertY?: boolean, premulAlpha?: boolean, format?: number, forceBindTexture?: boolean): void;
                                                                                                                                                                       ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:40704:54 - error TS2304: Cannot find name 'OffscreenCanvas'.

40704         _workingCanvas: Nullable<HTMLCanvasElement | OffscreenCanvas>;
                                                           ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:40706:62 - error TS2304: Cannot find name 'OffscreenCanvasRenderingContext2D'.

40706         _workingContext: Nullable<CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D>;
                                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:40772:67 - error TS2304: Cannot find name 'OffscreenCanvas'.

40772         constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);   
                                                                        ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:41765:54 - error TS2304: Cannot find name 'OffscreenCanvas'.

41765         _workingCanvas: Nullable<HTMLCanvasElement | OffscreenCanvas>;
                                                           ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:41767:62 - error TS2304: Cannot find name 'OffscreenCanvasRenderingContext2D'.

41767         _workingContext: Nullable<CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D>;
                                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:105418:31 - error TS2304: Cannot find name 'MouseWheelEvent'.

105418         event: PointerEvent | MouseWheelEvent;
                                     ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:105432:31 - error TS2304: Cannot find name 'MouseWheelEvent'.

105432         event: PointerEvent | MouseWheelEvent);
                                     ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:105458:57 - error TS2304: Cannot find name 'MouseWheelEvent'.

105458         constructor(type: number, event: PointerEvent | MouseWheelEvent, localX: number, localY: number);
                                                               ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:105475:57 - error TS2304: Cannot find name 'MouseWheelEvent'.

105475         constructor(type: number, event: PointerEvent | MouseWheelEvent,
                                                               ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:112575:81 - error TS2304: Cannot find name 'OffscreenCanvas'.

112575         static CreateCanvas(width: number, height: number): HTMLCanvasElement | OffscreenCanvas;
                                                                                       ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:120467:162 - error TS2304: Cannot find name 'OffscreenCanvas'.

120467             updateDynamicTexture(texture: Nullable<InternalTexture>, source: ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | OffscreenCanvas, invertY?: boolean, premulAlpha?: 
boolean, format?: number, forceBindTexture?: boolean): void;
                                                                                                                                                                        ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:120866:54 - error TS2304: Cannot find name 'OffscreenCanvas'.

120866         _workingCanvas: Nullable<HTMLCanvasElement | OffscreenCanvas>;
                                                            ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:120868:62 - error TS2304: Cannot find name 'OffscreenCanvasRenderingContext2D'.

120868         _workingContext: Nullable<CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D>;
                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:120934:67 - error TS2304: Cannot find name 'OffscreenCanvas'.

120934         constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);  
                                                                         ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:121922:54 - error TS2304: Cannot find name 'OffscreenCanvas'.

121922         _workingCanvas: Nullable<HTMLCanvasElement | OffscreenCanvas>;
                                                            ~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:121924:62 - error TS2304: Cannot find name 'OffscreenCanvasRenderingContext2D'.

121924         _workingContext: Nullable<CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D>;
                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:158921:16 - error TS2304: Cannot find name 'MSGesture'.

158921     MSGesture: MSGesture;
                      ~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:158963:78 - error TS2304: Cannot find name 'NavigatorUserMediaSuccessCallback'.

158963     webkitGetUserMedia(constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback): void;
                                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:158963:m128 - error TS2304: Cannot find name 'NavigatorUserMediaErrorCallback'.

158963     webkitGetUserMedia(constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback): void;
                                                                                                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:158964:75 - error TS2304: Cannot find name 'NavigatorUserMediaSuccessCallback'.

158964     mozGetUserMedia(constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback): void;
                                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:158964:125 - error TS2304: Cannot find name 'NavigatorUserMediaErrorCallback'.

158964     mozGetUserMedia(constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback): void;
                                                                                                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:158965:74 - error TS2304: Cannot find name 'NavigatorUserMediaSuccessCallback'.

158965     msGetUserMedia(constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback): void;
                                                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:158965:124 - error TS2304: Cannot find name 'NavigatorUserMediaErrorCallback'.

158965     msGetUserMedia(constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback): void;
                                                                                                                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:159157:30 - error TS2304: Cannot find name 'WebGLObject'.

159157 interface WebGLQuery extends WebGLObject {
                                    ~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:159165:32 - error TS2304: Cannot find name 'WebGLObject'.

159165 interface WebGLSampler extends WebGLObject {
                                      ~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:159173:29 - error TS2304: Cannot find name 'WebGLObject'.

159173 interface WebGLSync extends WebGLObject {
                                   ~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:159181:42 - error TS2304: Cannot find name 'WebGLObject'.

159181 interface WebGLTransformFeedback extends WebGLObject {
                                                ~~~~~~~~~~~


Error: node_modules/babylonjs/babylon.module.d.ts:159189:42 - error TS2304: Cannot find name 'WebGLObject'.

159189 interface WebGLVertexArrayObject extends WebGLObject {
                                                ~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


Ă— Failed to compile.

And my package.json is below

{
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
 "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/localize": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
    "@popperjs/core": "^2.10.2",
    "babylonjs": "^4.2.1",
    "babylonjs-loaders": "^4.2.1",
    "babylonjs-materials": "^4.2.1",
    "bootstrap": "^5.1.3",
    "masonry-layout": "^4.2.2",
    "mdbootstrap": "^4.20.0",
    "ng-otp-input": "^1.8.1",
    "ng-toggle-button": "^0.2.2",
    "ngx-otp-input": "^0.11.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular/cli": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }
}
2

I have updated the babylonjs version to ** 5.0.0-beta.8** . Now the errors are

Warning: D:\Projects\2022-23\XXXX\yyyy\src\app\home-screen\home-screen.component.ts depends on 'babylonjs-loaders'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: D:\Projects\2022-23\XXXX\yyyy\src\app\home-screen\home-screen.component.ts depends on 'babylonjs-materials'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies




Error: node_modules/babylonjs-loaders/babylonjs.loaders.module.d.ts:1016:14 - error TS2305: Module '"babylonjs/Meshes/buffer"' has no exported member 'Buffer'.

1016     import { Buffer, VertexBuffer } from "babylonjs/Meshes/buffer";
                  ~~~~~~


Error: node_modules/babylonjs-loaders/babylonjs.loaders.module.d.ts:1016:22 - error TS2305: Module '"babylonjs/Meshes/buffer"' has no exported member 'VertexBuffer'.

1016     import { Buffer, VertexBuffer } from "babylonjs/Meshes/buffer";
                          ~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


Ă— Failed to compile.
3

And after Updating all other babylonjs files to the latest (5.0.0.beta8). The issue has been fixed.

3 Likes
4

After updating the babylonjs version from 4.2.1 to 5.0.0 beta8 , I am facing a problem with the quality of rendering, no codes has been changed. But now there is some noises at all the edges of the imported model. If I see the same project in the older version. The quality is very high. But now, the rendered output is Blur. If I remove the fxaa postprocess let fxaa = new BABYLON.FxaaPostProcess('fxaa', 1.0, camera);,

then the sharpness is coming. But I need fxaa too. How to handle this?

5

fxaa should work in 5 as there were no changes there… I guess :slight_smile:

Could you repro in the playground ? so that I can have a look ASAP.

1 Like
6

Any possibility to create PG on previous versions?

7

You can by switching the version selector at the top right to 4.2 but we won t back fix if the error only happens there. The best would be to try on 5.0 so that we can fix it ASAP.

1 Like
8

I got it, the issue is coming from the property of the Engine “adaptToDeviceRatio”. In older version(4.2.0), even If I make it true, The quality is not changing. But in newer Version (5.0.0 rc) it is affecting the render quality. If I made this to true adaptToDeviceRatio, then the quality is looking bad but If I made this false, then the quality is looking good but the framesDrop is happening. How to solve this?

9

Are you sure it is not reversed ? true → good and slow / false → bad and false ?

A plauground repro would really help

1 Like