Issue using Vite and importing procedural textures

Bugs
1

I’m using VueJS 3 and the Vite development/build tool (fairly new, based on rollup, see GitHub - vitejs/vite: Native-ESM powered web dev build tool. It's fast.). So far, things are working, but I can’t seem to get access to the procedural textures (fire, wood, etc.). Attempting to instantiate these leads to an error like this:

Uncaught (in promise) TypeError: BABYLON.FireProceduralTexture is not a constructor
    at initBabylon (App.vue:35)
    at App.vue:82

I’ve done the npm install and the import 'babylonjs-procedural-textures'; as described in the docs (babylonjs-procedural-textures - npm), but the new textures have not been added to the BABYLON namespace.

I’ve also messed around with trying to import and reference the classes more specifically from that npm library, but that just leads to “not a constructor” errors.

Here’s a minimal reproducible example of the issue. npm install, then npm run devs (the “s” is for https in this case) and check the console:

I have a sense that this is some weird issue dealing with ES modules, but it’s over my head…

Note the reference in the vue.config.js file to babylonjs-procedural-textures. This is because when I didn’t have that configuration piece set up, I got the following warning from Vite while it was running. Now I don’t get the warning, but I still can’t use the textures.

[vite] Avoid deep import "babylonjs-procedural-textures/babylonjs.proceduralTextures" (imported by /src/App.vue) because "babylonjs-procedural-textures" has been pre-optimized by vite into a single file. Prefer importing directly from the module entry:

  import { ... } from "babylonjs-procedural-textures" 

If the dependency requires deep import to function properly, add the deep path to optimizeDeps.include in vite.config.js.

It’s possible this is a problem with Vite. If so, I’m happy to add and Issue over there, but I’m hoping at least someone here will understand better what the issue is and whether there is a viable workaround.

2

Unfortunately I have no idea about Vite maybe @RaananW would know ?

3

Hey @richardtallent,

Try the es6 package for the procedural texture library - @babylonjs/procedural-textures - npm search (npmjs.com) . When trying to mix umd and es6 strange things might happen. I assume you have two babylon packages - one is the UMD version, and th other is the es6 version.

I hope this helps!

4

Thanks @RaananW! I didn’t find any ES6-specific instructions, I guess that build is fairly new and the nuance of using the scoped package name to specify them was lost on me.

Even with the correct package and import, it didn’t add the procedural textures to the BABYLON namespace – not sure if that’s a Vite thing or if that was expected. But now my “floor is lava” (lol) so I guess it’s working!

5

Our goal is that your floor will always be lava. Or water, if that’s your thing :blush:

The es6 packages are not augmenting the Babylon namespace. In fact, there is no global namespace in the es6 modules, but you can “simulate” one by importing everything and calling it Babylon. I would avoid doing that altogether and only import what is needed. That would be the cleanest way.

6

I’m importing all of core under BABYLON for now, but that’s just so I can have a better DX (intellisense, all augmented methods available, etc.) while I learn the basics of the library. At some point, I’ll definitely go back and just import the pieces I need so I can tree-shake. I just found and read the “ES6 support” page in the docs, and all of this is making a bit more sense now.

1 Like