TS2345: Argument of type 'import("babylonjs/scene").Scene' is not assignable to parameter of type 'BABYLON.Scene'

Questions
1

Hi,
I’ve tried to upgrade from 4.0.0-alpha.18 to 4.0.0-alpha.25 and I’ve got a lot of errors like these (among others):
TS2345: Argument of type ‘import(“babylonjs/scene”).Scene’ is not assignable to parameter of type ‘BABYLON.Scene’

TS2345: Argument of type ‘Matrix’ is not assignable to parameter of type ‘DeepImmutableObject’.
Types of property ‘invert’ are incompatible.
Type ‘() => import(“babylonjs/Maths/math”).Matrix’ is not assignable to type ‘() => BABYLON.Matrix’.
Type ‘import(“babylonjs/Maths/math”).Matrix’ is not assignable to type ‘BABYLON.Matrix’

I’m using the version from npm, and the import statement " import * as BABYLON from “babylonjs”;" in one global class. This has worked until alpha18.
I’ve found a similar Topic Argument of type 'import("babylonjs/Meshes/abstractMesh").AbstractMesh' Error, but there it doesn’t really say what fixed the errors.
What do I need to change for this to work? If you need more info, let me know.

Thanks :slight_smile:

2

This happens usually if you are mixing namespace and module code. Could you share your code so that I could take a look ?

3

I can’t give you the code, but maybe this will be enough:
I’ve got a class called global.ts:

import * as BABYLON from “babylonjs”;

export namespace Global {
export let engine: BABYLON.Engine;
export let scene: BABYLON.Scene;
…
}

In other classes I use the reference to the engine where its needed, like this:
import {Global} from “./global”;

Global.scene = new BABYLON.Scene(Global.engine);
let mesh = BABYLON.MeshBuilder.CreateBox(“test”, {}, Global.scene);

4

but in those classes you are then using a mix of namespace and Modules.

Global.scene = new BABYLON.Scene(Global.engine);

means global.scene comes from import * as BABYLON from “babylonjs”;

but in new BABYLON.Scene(Global.engine); BABYLON should be imported as well with import * as BABYLON from “babylonjs”;

or it fallbacks to the UMD typings creating the conflict you are seeing.

5

As a side not I would tend to avoid import * as BABYLON as it is the same as the namespace name, you could even change simply the case to import * as Babylon, this would be sufficient to not have conflict or spot them easily.

6

Thank you, just using import “babylonjs”; in global.ts works.

Another error I’ve got is
TS2339: Property ‘registerAction’ does not exist on type ‘AbstractActionManager’
when trying the following code:
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, evt => {
…
}
);
But this can be fixed by (scene.actionManager as BABYLON.ActionManager).registerAction(), although I don’t know if this is a bug, or desired behaviour.

7

This works as intented but I agree that we should open RegisterAction method on the baseClass.

Let s see what @Deltakosh thinks and we ll move it down one level for simplicity of use.

8

About your import “babylonjs”; as a side note this basically only creates side effects moving everything as global. It will work the same way Namespaces are by relying on a global.

If it is not a problem for you (I know some people do not want global) it is indeed the easiest :slight_smile:

9

I’m planning to move to ES6 anyway, so this is probably just a temporary fix for me, since I’m currently also relying on the 3D model files exported by the Tower of Babel extension, which doesn’t seem to work with the ES6 version, since it’s using the BABYLON namespace. But maybe I will switch to the gltf exporter.

1 Like