IsWindowObjectExist is not a function - ES6 support with Tree Shaking - bug?

Questions
1

Hi there!

I use babylon 6.11 with es6 support. Parcel is for running and building.
Everything worked, but when I try to run a production build, I got an error:

TypeError: e_.IsWindowObjectExist is not a function
изображение
it’s coming from engine creation here
изображение

I thought that I need to import something, but not. IsWindowObjectExist is defined, but it is not a function. So if I look in that source file domManagement.ts, I will see export function
изображение

and export DomManagement like this
изображение

And I am not so expert in js/ts to understand what is problem. But it is here.

Because when I try to use that function by two ways, one is working, and another gives same error:

изображение
изображение745×441 13.6 KB

And I don’t know what to do with it. I use parcel to serve and develop, it’s working fine. But when I build in production mode, I get that error. Maybe in dev mode process of engine creation is different and that is a bug. Maybe something else. Hope somebody can help :slight_smile:

P.S.
In dev mode both functions gives “true”. So maybe problem is in Tree Shaking process. But how to fix it?

2

This is so weird knowing how DomManagement is exported:

image
image1555×459 43.8 KB

@RaananW might have a clue ?

3

I tried to migrate to Webpack, and it is working. And then migrated to Vite (because it’s easy to configurate, as Parcel), and Vite is working too. I mean production builds, made with Webpack and Vite, both working.

So it looks like some problem on Parcel side. But anyway, it’s weird.

4

because I love finding out why those things happen - would you be able to share a simple parcel configuration that fails? that would be a great help :slight_smile:

5

Sure. This is small repro project.
I cannot attach a file, so made a repo on github.

2 Likes
6

you’re the best, thanks! I’ll make sure to analyze this.

1 Like
8

ok, it does seem like Parcel doesn’t like const objects holding functions. the production build is over-optimizing the build and removes functions that are not directly referenced in your code.

One solution is to import the DomManagement directly and actually using it once. Something like this is enough:

import { DomManagement } from "@babylonjs/core/Misc/domManagement";
console.log(DomManagement)

That presents a new interesting issue - MeshBuilder has the same issue :-). So you should instead import the CreateGround directly from the groundBuilder:

import { CreateGround } from "@babylonjs/core/Meshes/Builders/groundBuilder";

So if main .ts looks like this:

import { engine, scene } from './scene'
import { DomManagement } from "@babylonjs/core/Misc/domManagement";
import { CreateGround } from "@babylonjs/core/Meshes/Builders/groundBuilder";
import "@babylonjs/core/Materials/standardMaterial";

console.log(DomManagement)

async function main(): Promise<void> {
    CreateGround(
        'ground',
        { width: 4, height: 4 },
        scene
    )

    engine.runRenderLoop(() => {
        scene.render()
    })
}

main();

It compiles correctly in prod mode.

1 Like
10

Good to know! Thanks.
I will stay with Vite. But it can be helpfull for somebody in future.

1 Like