Runtime error: Uncaught (in promise) AudioSceneComponent needs to be imported before as it contains a side-effect required by your code

Questions
1

I use ES6 imports in my big project:

import { Engine } from "@babylonjs/core/.......";
...

It compiles with WebPack and Typescript fine without any errors. Then when I run my bundle.js in a browser:

// ... html:
<script src="bundle.js"></script>

I get:

Uncaught (in promise) AudioSceneComponent needs to be imported before as it contains a side-effect required by your code.

Ok, but before than what?
I never call AudioSceneComponent in my project. But my project uses Babylon’s audio system.

I tried add this import:

import { AudioSceneComponent } from "@babylonjs/core/Audio/audioSceneComponent";

to the beginning of my index.ts but I had no luck.
What should I check?

2

Ok, fixed it with:

import "@babylonjs/core/Audio/audioSceneComponent";

But I get some few errors:

Uncaught DefaultCollisionCoordinator needs to be imported before as it contains a side-effect required by your code.
…
Uncaught (in promise) TypeError: this.engine.captureGPUFrameTime is not a function

The first one fixes with:

import "@babylonjs/core/Collisions/collisionCoordinator"

The last one is because I use:

import { EngineInstrumentation } from "@babylonjs/core/Instrumentation";
const instrumentation = new EngineInstrumentation( engine );
if ( instrumentation ) {
	instrumentation.captureGPUFrameTime = true;
	instrumentation.captureShaderCompilationTime = true;
}

^^-- don’t know what to import to get it to work.
That one is NOT SOLVED yet.
Help! :grinning:

Why do I need to import the whole packages like AudioSceneComponent, CollisionCoordinator? Why does tree-shaking not work for those packages but works for other?

UPD:
As for AudioSceneComponent I have some thoughts. Is that error appears because I call audio settings like this? Indeed, I didn’t include nothing for audio system except just Engine/engine package.

import { Engine } from "@babylonjs/core/Engines/engine";
Engine.audioEngine.useCustomUnlockedButton = true;

As for not importing collisionCoordinator, I have just one suggestion. It’s because I use rays but I have just one import for Ray package. Looks it’s not enough to use the collision system:

import { Ray } from "@babylonjs/core/Culling/ray";
const groundRay = new Ray( ... );
if ( groundRay.intersectsMesh( mesh, true ).hit ) { ... }
3

cc @RaananW

4

A good question. The short answer is that they are dependencies of classes you have loaded.
The es6 tree-shaking feature, at its current state, requires an active import of needed classes or components. Some are extending the scene or engine class, some are loading features to already-imported classes.

Calling Engine.audioEngine is enough to start the autio engine, and thus require the import.

The side effects are documented in our docs page, but we might have missed something. I am currently working on re-organizing our repository to support full es-modules importing and proper tree-shaking, but that will take some time (and will require a new syntax). Again, still working on that, so you will have to bare with me :slight_smile:

1 Like
5

Thanks, I got it!

1 Like