Babylon with webpack: Including babylon creates type error, excluding creates excess chunking

Questions
,
1

Recently upgraded a project that consumes a separate babylon package to Angular 19. Immediately noticed that for some reason Babylon was generating hundreds of chunk files when the bundle was being built into the angular app.

I was able to track that issue down to marking babylon as an external in my webpack config ( Cannot combine bundle chunks with webpack - Questions - Babylon.js). Removing that allowed me to control chunking as expected in the build. However, when I build babylon internally, the angular app has runtime type errors when trying to access methods & properties of babylon type objects.

The two I have seen is engine.OnBeforeRenderView and engine.registerView not being defined in the build.

So when I build externally, the project runs perfect (but due to the environment I run it in takes forever to load because of the excessive chunk files), and when I build it internally the chunking issue goes away but I can no longer run the package inside the angular app due to the typing errors.

I have a repo here that can reproduce the issues bab-chunk-test

To run:

  1. Build babylon - Navigate to babylon-package and run npm i then:
    a. npm run build:prod (Build with internal packaging, type error issue)
    b. npm run build:noch (Build with internal packaging and no chunking, type error issue with maps)
    c. npm run build:external (Build with external packaging, chunk issue)
  2. Navigate to test-app and run npm i then npm run start

Im looking for a solution to either fix the type errors when packing internally or prevent the excessive chunking issues when packing externally with angular.

2

@RaananW as the webpack wizard.

3

So, this is again a webpack configuration issue due to a slight misunderstanding of how webpack works.

You want to solve the build:prod? just remove the filename and chunkFilename from output. It doesn’t work well together with the configuration of chunks.

Now, once you will do that you will notice your babylon bundle is a huge file. And you will probably wonder why. The reason is that you are dynamically loading the inspector. which is the right thing to do, of course. However, your configuration is telling webpack to take all of the rest of the @babylonjs packages and bundling them together. So the minute you try to configure your chunks, you will need to continue optimizing it.

A slight improvement (instead of the babylonBundle):

babylonBundle: {
                    name: "babylonCore",
                    chunks: "all",
                    priority: 40,
                    reuseExistingChunk: true,
                    test: (module) => /\/node_modules\/@babylonjs\/core/.test(module.resource),
                },
                dependencies: {
                    name: "babylonDependencies",
                    chunks: "all",
                    priority: 30,
                    enforce: true,
                    test: (module) => /\/node_modules\/@babylonjs\//.test(module.resource),
                },

I trust you will continue optimizing it and learning how webpack works so that this becomes clear.

2 Likes
4

Thanks again for your support on this problem.

The build:prod problem is more-so that when the angular app is run with that build configuration I get runtime typeErrors when the babylon code tries to execute. Chunking seems to behave and optimize as expected besides this.

image
image463×123 5.34 KB

It’s the build:external configuration where chunking misbehaves. As you previously stated it does so because angular is the one packaging instead, so Im not sure if there is much more I can do with that config to fix how angular chunks.

As it stands though, the build:external configuration is the only one that produces a functional app which is why I am trying to solve either build:prod or build:external.

I did apply your recommended changes to the common config, thank you for that optimization.

5

If there is functionality missing it is because of missing side effect files (in the build:prod). You mentioned before engine.registerView, which is part of the file @babylonjs/core/Engines/AbstractEngine/abstractEngine.views.ts. if you add

import "@babylonjs/core/Engines/AbstractEngine/abstractEngine.views.ts";

in your code it should include this file as part of the build, and will also include the functionality

1 Like
6

Brilliant. build:prod is working as intended now. Thank you for the support on this issue.

1 Like
7

One last question then. In my main project I am also hitting that same error but with using engine.OnBeforeViewRenderObservable.add(...) and it was pointing at the the observable being undefined (which I confirmed in debug) [Cannot read properties of undefined (reading 'add')]

The file this is in already has these imports
import '@babylonjs/core/Misc/observable';
import { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine';
import { EngineView } from '@babylonjs/core/Engines/AbstractEngine/abstractEngine.views';
import { Engine } from '@babylonjs/core/Engines/engine';

So if you have an idea of what import is missing that we be incredible.

It looks like I was able to resolve the error by removing
import { EngineView } from '@babylonjs/core/Engines/AbstractEngine/abstractEngine.views';
and replacing it with just
import '@babylonjs/core/Engines/AbstractEngine/abstractEngine.views'