Webpack Issue upgrading from Babylon.js 6.49.0 to 8.15.1

Bugs
1

I am in the process of upgrading my app from @babylonjs/core from 6.49.0 to 8.15.1 and have run into an issue with Webpack:
on a page https://localhost:8000/gallery/7f7bb756-50da-4bae-a0fe-e3b8b5d3e6b2/view

Babylon.JS is making a request for this URL which is returning a 404:

https://localhost:8000/gallery/7f7bb756-50da-4bae-a0fe-e3b8b5d3e6b2/vendors-node_modules_babylonjs_core_Shaders_ShadersInclude_bakedVertexAnimation_js-node_modul-3ca487.bundle.js

During the Webpack build these are displayed:

assets by status 44.2 MiB [compared for emit]
  assets by chunk 3.35 MiB (id hint: vendors)
    asset vendors-node_modules_babylonjs_core_ShadersWGSL_pbr_fragment_js.bundle.js 421 KiB [compared for emit] (id hint: vendors)
    asset vendors-node_modules_babylonjs_core_Shaders_pbr_fragment_js.bundle.js 415 KiB [compared for emit] (id hint: vendors)
    asset vendors-node_modules_babylonjs_core_Animations_animationGroup_js.bundle.js 285 KiB [compared for emit] (id hint: vendors)
    + 25 assets
  + 102 assets

In my webpack.common.js is adds this to the dependOn list for the page entry:
bjsCore: ['@babylonjs/core', 'pepjs'],

Do I need to include other packages now in that list?

I have tried adding the other BJS packages but that didn’t fix it:

    bjsCore: [
      '@babylonjs/core', 
      'pepjs', 
      '@babylonjs/materials', 
      '@babylonjs/serializers',
      '@babylonjs/loaders'
    ],

Thanks,
Michael

2

cc @amoebachant

3

cc @ryantrem as @amoebachant is relaxing on summer break :slight_smile:

5

It doesn’t look like an issue of missing package references to me, it looks like an issue with code splitting. Since Babylon 6, we have started using dynamic imports (e.g. await import(...)) quite a bit, especially around dealing with webgl vs webgpu shaders (so you can download just the shaders for the engine you are using), so to me it looks more related to that. I would guess there is some misconfiguration in your webpack settings related to code splitting.

Can you see if the file vendors-node_modules_babylonjs_core_Shaders_ShadersInclude_bakedVertexAnimation_js-node_modul-3ca487.bundle.js (and the other related chunk files) actually exist on disk? Is webpack generating those files and the webpack dev server just can’t resolve them, or is webpack not generating them at all?

6

The bundles exist on disk at
https://localhost:8000/js/vendors-node_modules_babylonjs_core_Shaders_ShadersInclude_bakedVertexAnimation_js-node_modul-3ca487.bundle.js

not at the location it is looking:
https://localhost:8000/gallery/7f7bb756-50da-4bae-a0fe-e3b8b5d3e6b2/vendors-node_modules_babylonjs_core_Shaders_ShadersInclude_bakedVertexAnimation_js-node_modul-3ca487.bundle.js

the bundle for the page is in https://localhost:8000/js/ as well.

Should I replace all of the BJS import directives in my code with await import directives?

7

The webpack configuration was the issue.

setting the wepack config output.publicPath to “/js/” fixed it and now BabylonJS 8.15 works!

Thank you so much!
Michael

4 Likes