AnimationGroup.MakeAnimationAdditive being tree-shaken by Webpack

Hey everyone,

We have included babylonjs@4.1.0 in our project’s package.json file, and our project is built using the webpack configuration provided by create-react-app. (We can eject and edit the webpack config if necessary to solve the issue.)

When we load our scene and animations through an HTML file that includes Babylon.JS from a bundled copy, calls to AnimationGroup.MakeAnimationAdditive work just fine.

This working behavior can be replicated by cloning the amazon-sumerian-hosts repo and navigating to the babylon.html file with your browser. Here is the source that has a working version of MakeAnimationAdditive.

In our project, however, we import AnimationGroup using ES6 import syntax:

import { AnimationGroup } from '@babylonjs/core'

For whatever reason, it appears that when compiling, Webpack is treeshaking MakeAnimationAdditive, causing us to get this error:

_babylonjs_core__WEBPACK_IMPORTED_MODULE_18__.AnimationGroup.MakeAnimationAdditive is not a function

Is there anything we can do on ourside to make sure this static function is not tree-shaked out?

Thank you!


Edit P.S.: As a workaround I tried to import * as BABYLON from 'babylonjs' and added the BABYLON namespace before the call to AnimationGroup.MakeAnimationAdditive, but it gives the same error.

Edit: spoke too soon, this isn’t working.

Found a workaround, but I’m not sure if it has any implications for functionality. Basically import AnimationGroup from 'babylonjs' rather than '@babylonjs/core'.

  // AnimationGroup,
} from "@babylonjs/core";
import { AnimationGroup } from 'babylonjs';

Am I toying with fire by splitting imports like this?

Additive animation wasn’t part of the 4.1 release, it was added later, in mid-March ( Your bundled copy is 4.2.0-alpha.17 which is why it works with that.

1 Like

Thank you! We’ll update to an alpha dependency. Appreciate the input.