App breaking, help please - babylon 4.2

Questions
1

Hi friends, my react app that uses babylon, which I last built a year ago, was working perfect a year ago. Now I have to update it. So I did npm install from the beginning and this is the problem:

  • Before when running the app, it would load the models normally, and I get in the console this

    ll-before
    ll-before1091Ă—477 182 KB

  • Now I get instead of that errors, and I get this:

    ll-now
    ll-now1109Ă—730 240 KB

  • the key difference I notice is that before its using babylon 4.2.0 but now in the errors I read babylon 4.2.2

  • This surprises me because in my package.json I am referring at all times to 4.2.0

    ll-dep1
    ll-dep1839Ă—839 172 KB

ll-dep2
ll-dep21126Ă—234 91 KB

do you have some advice to solve this even as a patch, I mean , why is it referring to 4.2.2 when I am not referring to 4.2.2 anywhere? is that what is breaking it?
the code that loads the stuff has not been touched at all. I just needed to change some text in the info screen. Nothing else has been touched. And yet now the loading of the models is broken.

Do I have to somehow force the babylon version installed to be 4.2.0 like before? but I thought thats what my package.json is already doing

thank you for any advice :slight_smile:

2

The first thing I would do is to delete node_modules folder and perform npm i again.
Very often it helps.

3

thank you @labris , yes that’s the first thing I did, I deleted npm cache, deleted those folders and did npm install from zero, and unfortunately I have this problem still there, all the time

4

i looked inside node-modules and its installing 4.2.2 for some reason, although it should install 4.2.0, I dont know if that’s the reason of the problem but that seems to be a difference

{
“author”: {
“name”: “David CATUHE”
},
“contributors”: [
“Sebastien VANDENBERGHE”
],
“name”: “babylonjs”,
“description”: “Babylon.js is a JavaScript 3D engine based on webgl.”,
“version”: “4.2.2”,
“repository”: {
“type”: “git”,
“url”: “GitHub - BabylonJS/Babylon.js: Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.”
},
“main”: “babylon.js”,
“files”: [

5

If I’m not mistaken, in your package.json you are specifying that you would like the most current version of Babylon.js 4.2.x, which happens to be 4.2.2. This allows authors to easily apply servicing updates (e.g., patch version changes for security fixes) without specifically requesting that patch version.

If you want to only use 4.2.0, remove the ^ prefix from the packages and run a clean install with npm ci.

hth!

3 Likes
6

oh I see, yes, getting rid of that symbol should force it to install 4.2.0 ok , and then I can do npm install after deleting node-modules, I will try it, thank you, I hope that’s whats causing the problem, the difference between 4.2.0 and 4.2.2, lets see

7

@jelster @labris it worked, I reinstalled all and now I have babylon 4.2.0. But unfortunately Im still getting the very same error I had before (as shown in the screenshot above). Strange really, 1 year ago it wasn’t happening

8

very strange, I got the package-lock.json from when the app was working and I did npm ci , and it installed etc, but I get the very same error that you see in the capture above. So maybe the problem is somewhere else? but where?

I see a bunch of
“WebGL: INVALID_VALUE: getProgramParamter: attempt to use a deleted object”

and then
Uncaught (in promise) Error: Unable to load from ./models/million3-hr/million3-hr.babylon: Scene has been disposed
at sceneLoader.js:754:1
at errorHandler (sceneLoader.js:673:1)
at dataCallback (sceneLoader.js:194:1)
at successCallback (sceneLoader.js:224:1)
at XMLHttpRequest.onReadyStateChange (fileTools.js:435:1)

but nothing has been changed in the code from a year ago and a year ago it compiled and worked all perfectly

9

its funny because I have the react build I created last year and it keeps on working perfectly in all browsers, this means that it’s not a browser issue.
And after doing npm ci with the package lock of last year one would think that it also would not be a library issue.
So then I don’t get where the issue is

10

That “dispose” error seems to refer to what goes on in this part of the code (which anyway was running perfectly till now:

import { Engine, Scene } from "@babylonjs/core";
import React, { useEffect, useRef } from "react";
import "../App.css";


const LComp = (props) => {
  const reactCanvas = useRef(null);
  const {
    antialias,
    engineOptions,
    adaptToDeviceRatio,
    sceneOptions,
    onRender,
    onSceneReady,
    myprops,
    ...rest
  } = props;

  const onSceneReadyProp=props.onSceneReady;
  const propsProp = props;

  useEffect(() => {
    if (reactCanvas.current) {
      const engine = new Engine(
        reactCanvas.current,
        antialias,
        engineOptions,
        //{ preserveDrawingBuffer: false },
        //{ preserveDrawingBuffer: true, stencil: true },
        adaptToDeviceRatio
      );
      const scene = new Scene(engine, sceneOptions);
      if (scene.isReady()) {
        onSceneReadyProp(scene, propsProp);
      } else {
        scene.onReadyObservable.addOnce((scene) =>
        onSceneReadyProp(scene, propsProp)
        );
      }
      engine.runRenderLoop(() => {
        if (typeof onRender === "function") {
          onRender(scene);
        }
        scene.render();
      });
      const resize = () => {
        scene.getEngine().resize();
      };
      if (window) {
        window.addEventListener("resize", resize);
      }
      return () => {
        scene.getEngine().dispose();
        if (window) {
          window.removeEventListener("resize", resize);
        }
      };
    }
  }, [onSceneReadyProp, reactCanvas, adaptToDeviceRatio, antialias, engineOptions, onRender, sceneOptions,propsProp]);

  return (
    <canvas width={700} height={600} ref={reactCanvas} {...rest} />
);
}


export default LComp;
11

any ideas about this? I would think that a babylon app that I last built a year ago, and whose code has not changed since then, should still build today, thank you for any suggestions :slight_smile:

12

Have you tried adding any logging around the useEffect function, specifically around the bottom part where it calls scene.dispose to see what might be causing the scene to be disposed prematurely?

Another thing to look at is whether you’re getting a WebGL context lost event (are you tabbing away or causing the browser window to lose focus while developing?) and handling it if or as needed. IIRC, newer versions of BJS may handle it differently/better iirc.

HTH!

1 Like
13

@jelster I think that nothing of that would help. The code has not changed. It built successfully 1 year ago. The build created 1 year ago continues to run 100% well in all browsers today. The problem is something else which I cannot yet pinpoint

14

I get your code hasn’t changed, but what about React? Did the version update or change there?

What are your other base assumptions, and have you validated they align with your ground-truths? I know that when the impossible seems to be happening, it can help to re-examine these types of things. Sorry you’re having so much friction for what must feel like something so simple!

15

I’m not sure if this will fix your issue, but I noticed in your package.json you are including both the @babylonjs packages (that start with @) and the babylonjs packages that do not start with @. It’s my understanding that you should never mix them. Use all packages of one type or the other but not both.

2 Likes
16

thank you very much @owen, all I did is to use the package-lock of last year, which was working great, and do “npm ci”

17

Maybe give it a try?

https://doc.babylonjs.com/setup/frameworkPackages/npmSupport

The documentation explicitly says: “ Please note that you can not mix ES6 and our legacy packages.”

2 Likes
18

@jelster thank you for your great advice and support.

  • React version maybe, but I am doing “npm ci” from package lock of when it was compiling well so that should ensure that everything, including React would stay the same as last year, right?
19

@owen, but what is the way to unify these? I cannot simply delete the ones that don’t have @ because they are libraries that the code uses, so what’s the fix?

“dependencies”: {
“@babylonjs/gui”: “^4.2.0”,
“@material-ui/core”: “^4.11.2”,
“@material-ui/icons”: “^4.11.2”,
“@testing-library/jest-dom”: “^5.11.6”,
“@testing-library/react”: “^11.2.2”,
“@testing-library/user-event”: “^12.6.0”,
“babylonjs”: “^4.2.0”,
“babylonjs-gui”: “^4.2.0”,
“babylonjs-loaders”: “^4.2.0”,
“babylonjs-materials”: “^4.2.0”,

20

First consider to create a new git branch.

Then modify your package.json:

“@babylonjs/gui”: “^4.2.0”,
“@material-ui/core”: “^4.11.2”,
“@material-ui/icons”: “^4.11.2”,
“@testing-library/jest-dom”: “^5.11.6”,
“@testing-library/react”: “^11.2.2”,
“@testing-library/user-event”: “^12.6.0”,
“@babylonjs/core”: “^4.2.0”,
“@babylonjs/loaders”: “^4.2.0”,
“@babylonjs/materials”: “^4.2.0”,

npm i

Delete all occurences of BABYLON. in your source. Use global replace.
Delete all imports from the legacy packages. import whatever from 'babylonjs' (delete imports for the GUI and materials as well)
Read this: Auto-add missing imports on file save in VS Code ✨ - DEV Community

Or do it manually in each file (I would do it this way):

image
image834Ă—440 50.1 KB

Pick the one you need:

image
image946Ă—668 71.7 KB

4 Likes