Issues with loading "babylonjs-*" packages

I tried to upgrade from 9.0.0 to 9.5.0.
I have issues with imports.

If I import this:

import { WoodProceduralTexture, GrassProceduralTexture, MarbleProceduralTexture, FireProceduralTexture, BrickProceduralTexture, RoadProceduralTexture, CloudProceduralTexture } from 'babylonjs-procedural-textures';

I get this:

babylonjs.proceduralTextures.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'ShadersStore')
    at eval (babylonjs.proceduralTextures.min.js:1:1030)
    at eval (babylonjs.proceduralTextures.min.js:1:23)
    at eval (babylonjs.proceduralTextures.min.js:1:112)
    at ./node_modules/babylonjs-procedural-textures/babylonjs.proceduralTextures.min.js (main.js:787:1)
    at __webpack_require__ (main.js:990:32)
    at fn (main.js:1248:21)
    at eval (introScene.js:7:87)
    at ./js/mainObjects/levels/introScene.js (main.js:338:1)
    at __webpack_require__ (main.js:990:32)
    at fn (main.js:1248:21)

Another example. If I import this:

import * as GUI from 'babylonjs-gui';

I get this:

babylon.gui.min.js:1 Uncaught TypeError: e.Vector2 is not a constructor
    at eval (babylon.gui.min.js:1:5394)
    at eval (babylon.gui.min.js:1:23)
    at eval (babylon.gui.min.js:1:112)
    at ./node_modules/babylonjs-gui/babylon.gui.min.js (main.js:777:1)
    at __webpack_require__ (main.js:980:32)
    at fn (main.js:1238:21)
    at eval (guiManager.js:7:71)
    at ./js/mainObjects/guiManager.js (main.js:195:1)
    at __webpack_require__ (main.js:980:32)
    at fn (main.js:1238:21)

I checked some intermediate versions and here is my regression log.
9.0.0 - everything works fine.
9.1.0 - npm run dev refuse to compile. It just crashes while trying to be built.
9.2.1 - Libraries are still loading and seem to work, but I get error with MergeMeshes. subMeshes array has only 0th index. Example:

const mesh = BABYLON.Mesh.MergeMeshes([sphere, face, fin], true, false, false, false, true);
        mesh.subMeshes[0].materialIndex = 0;
        mesh.subMeshes[1].materialIndex = 1; //will crash here
        mesh.subMeshes[2].materialIndex = 2;
        mesh.material = multimat;

9.3.0 - Same as 9.2.1
9.4.0 - Same as 9.3.0.
9.5.0 - cannot import babylonjs dependencies anymore.

Full package.json for reference:

{
  "name": "babylonfpskit",
  "version": "0.0.1",
  "description": "Babylon FPS Kit",
  "main": "js/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "4.0.0",
    "copy-webpack-plugin": "14.0.0",
    "html-webpack-plugin": "5.6.6",
    "terser-webpack-plugin": "5.3.17",
    "webpack": "5.105.4",
    "webpack-cli": "6.0.1",
    "webpack-dev-server": "5.2.3"
  },
  "dependencies": {
    "@babylonjs/havok": "1.3.12",
    "@babylonjs/inspector": "9.5.0",
    "babylonjs": "9.5.0",
    "babylonjs-gui": "9.5.0",
    "babylonjs-loaders": "9.5.0",
    "babylonjs-materials": "9.5.0",
    "babylonjs-post-process": "9.5.0",
    "babylonjs-procedural-textures": "9.5.0",
    "babylonjs-serializers": "9.5.0"
  }
}

Notes on using “@” imports. I read that using “@” imports is encouraged and I gave it a fair shot, but I can’t prefer them because:
a) I use a lot of BabylonJS features, so there is little to no dependency shaking can be done, thus, I still receive a pretty big bundle on the start, which apparently is about 1MB bigger, compared to old approach, so I will actually lose from transition to “@”.
b) I still need to import additional stuff for side effects.
c) WIth old approach I can just do import * as BABYLON from "babylonjs"; and all my BabylonJS related stuff will be nicely hidden inside of BABYLON namespace, so everything BabylonJS is being called like BABYLON.<babylon_feature>. WIth “@” approach it would require me to do an extra step to achieve the same.

But anyway, I didn’t find any mentions in the changelog that say that you are killing the old “babylonjs-*” dependencies. So, I assume, things just got broken.

can I ask - why don’t you use the @babylonjs/* packages, that are suitable for es6 imports? just wondering. I am anyhow checking the import syntax right now.

Yeah, this looks less like an intentional deprecation and more like a breaking change in how the legacy babylonjs-* packages are bundled/initialized in 9.5.0.

From your errors (ShadersStore undefined, Vector2 is not a constructor), it strongly suggests that the core BABYLON namespace isn’t being properly attached before the dependent packages execute. In older versions, those side-effect imports relied on a global-ish initialization order, which seems to have gotten stricter or changed internally.

A couple of things you can try before giving up on the non-@babylonjs/* approach:

  • Force import order explicitly
    Make sure babylonjs is imported before anything else:

    
    
    import * as BABYLON from "babylonjs";
    import "babylonjs-gui";
    import "babylonjs-procedural-textures";
    

    (avoid destructuring imports from those extension packages for now)

  • Check Webpack config

    Ensure you’re not accidentally duplicating Babylon core (e.g., via aliases or mixed ESM/CJS resolution). Multiple instances can cause exactly these constructor/undefined issues.

  • Try non-minified builds

    Sometimes .min.js versions behave differently with tree-shaking. You can test with direct paths or adjust resolve settings.

That said, Babylon has been clearly moving toward the scoped @babylonjs/* ecosystem, and even if the old packages aren’t officially “killed,” they’re likely not getting the same level of compatibility attention anymore.

At this point, if 9.0.0 works for your pipeline and upgrading isn’t critical, sticking there might be the pragmatic move until this gets clarified or fixed upstream.

I think I explained it clearly in Notes on using “@” imports section of my original post.

Anyway, thanks for the fix. I will check it during the week.

Updates on trying to run it with 6.2.0.

During npm run dev stage I see the following error in the terminal:

WARNING in ./node_modules/@babylonjs/gui-editor/dist/babylon.guiEditor.js 1:1407132-1407189
Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core/package.json' in 'C:\babylon\node_modules\@babylonjs\gui-editor\dist'
 @ ./node_modules/@babylonjs/inspector/lib/index-D0JXVQQf.js 21667:54-85 20957:46-77
 @ ./node_modules/@babylonjs/inspector/lib/index.js 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416 1:0-3416
 @ ./js/mainObjects/levelManager.js 377:42-72
 @ ./js/app.js 1:0-54 4:26-38

It doesn’t prevent the start, however.
My line 377 in levelManager.js, if needed, does:
const inspectorModule = await import("@babylonjs/inspector");
In other words, I am trying to import it on demand only. But inspector itself works when I call it. The only real discomfort of the error above is that it makes my npm run dev to start much longer than before.

The bigger problem though is that something got broken between 9.0.0 and 9.2.1 regarding merged meshes indexing, I mentioned that above.

const turretHead = BABYLON.Mesh.MergeMeshes([sphere, face], true, false, false, false, true);
turretHead.name = "turret_head";
turretHead.subMeshes[0].materialIndex = 0;
turretHead.subMeshes[1].materialIndex = 1; //will crash here
turretHead.material = multimat;

It says Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'materialIndex').
The turretHead.subMeshes has only one element (0th index) and this element has infinite circular dependency loop in the _mesh property, so

turretHead.subMeshes[0]._mesh === turretHead.subMeshes[0]._mesh.subMeshes[0]._mesh;
true

Is it possible that sphere.material === face.material? Because that would be expected: [Mesh] Fix: consolidate submeshes by material in MergeMeshes with multiMaterials by Popov72 ¡ Pull Request #18243 ¡ BabylonJS/Babylon.js ¡ GitHub

Not sure about the ciruclar ref. Is that not just a convenience ref to the owner?

Okay, I figured out what happened with subdivision.

Changing BABYLON.Mesh.MergeMeshes([sphere, face], true, false, false, false, true); to BABYLON.Mesh.MergeMeshes([sphere, face], true, false, undefined, true); fixes the issue.

Apparently, the 6th argument which says:

* `Optional` multiMultiMaterials: boolean

when true (false default), subdivide mesh into subMeshes with multiple materials, ignores subdivideWithSubMeshes.

doesn't work anymore, so you should always subdivide with 5th argument.

So, there is only issue with

WARNING in ./node_modules/@babylonjs/gui-editor/dist/babylon.guiEditor.js 1:1407132-1407189
Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core/package.json' in 'C:\babylon\node_modules\@babylonjs\gui-editor\dist'

remains.

Is your game called “Fort Awesome” or so? Otherwise there might be typo:

Error: Can't resolve '@fortawesome/fontawesome-svg-core/package.json'
                         ^

Nevermind: npmjs.com/package/@fortawesome/fontawesome-svg-core

It has nothing to do with my game. It’s in Babylon.js dependencies. It started to appear on version 6.2.0. It’s in babylonjs deps.