Noticing and Fixing Missing ES6 Modules in Babylonjs

I'm having my students use ES6 modules with Babylonjs this semester (see here for a quick overview of how I had them configure their development environments).

A couple of students asked why their code might suddenly start showing a white screen in the browser, and how they might fix it.  Their first assignment was meant to be a simple "add some Babylon content to this working sample" as a way of making sure they had a working environment, and at least walked through the Babylon 101 tutorial.

I posted a detailed reply to one of these questions on Teams, and thought I'd repeat it here (since this is a pretty common issue).

The Question

Any ideas on why I would get a blank white screen when trying to use Animation.CreateAndStartAnimation()?

My Answer (copied more or less directly from Teams)

If there is a white screen, look in the console to see if there is an error. Here I see this:

Clicking on animation.ts:164shows me:

Indeed, beginDirectAnimation is undefined on scene.  Using the debugger, I confirm this by inspecting the scene object.  Why?

Next, I search in VS code (clicking the gear at the end of the "files to exclude" line to have it search everything) and get this:

Notice that the first hit in animatable.js is assigning a function to Scene.prototype.beginDirectAnimation ... this is a common way of adding NEW METHODS to JS objects.   Looking at this file, I see that it defines the Animatable class, and then below it, adds a bunch of methods to Scene.  Oh, wait ...

(the solution begins to dawn on me...)

I remember, oh ya (I even mentioned this when we were looking at the Babylon docs): go to https://doc.babylonjs.com/features/es6_support and look down in the "Side Effects" and FAQ sections.  If you are importing individual modules (as I asked you too), instead of the top level @babylonjs/core (which will include all of core), you need to remember to look at the list of modules with side effects in "The intellisense does not propose the method I normally use in the bundled version and an undefined error is raised at runtime?"

And there, the very first line is:

• scene."animationRelatedMethods like beginAnimation and so on... " are available in the Animations/animatable module

So, after all this, I realize, we need to add import
@babylonjs/core/Animations/animatable
to the import statements to pull in the module that adds those commands to the Scene object.

Also, please note:  I gave this long explanation to show you how I figured this out ... since initially I wasn't sure.  I do not expect javascript novices would have known everything here, especially the step where I looked at animatable and knew (just from the bit in the search results, showing assigning a function to Scene.prototype.beginDirectAnimation) that animatable had side effects.  But the earlier bits about debugging, stepping through the code, etc., are things you should start practicing.

For debugging, I simply put a break point on that line that crashed so the debugger stopped there, refreshed the tab to reload and restart, and then when it stopped I started poking around at the objects.