How to upgrade babylon.js?

Questions
1

I now this may be a stupid question, but being new to babylon and searching for a while on how exactly to upgrade it to keep up to date with the latest versions……

I have version 6.35.0 right now.

Do I just

npm i @babylonjs/core

to upgrade to the latest and greatest? I just want to make sure.

2

Can you share your package.json file or the repo?

3

Here’s my package.json:

“dependencies”: {
“@mdi/font”: “7.0.96”,
“babylonjs”: "^6.35.0”,
“babylonjs-gui”: "^6.35.0”,
“core-js”: "^3.29.0”,
“cors”: "^2.8.5”,
“express”: "^4.18.2”,
“mitt”: "^3.0.1”,
“roboto-fontface”: “*”,
“vue”: "^3.2.0”,
“vue-router”: "^4.0.0”,
“vuetify”: "^3.0.0”,
“vuex”: “^4.0.2”
},
“devDependencies”: {
“@babel/types”: "^7.21.4”,
“@babylonjs/core”: "^6.34.0”,
“@babylonjs/inspector”: "^6.34.0”,
“@types/node”: "^18.15.0”,
“@vitejs/plugin-vue”: "^4.0.0”,
“@vue/eslint-config-typescript”: "^11.0.0”,
“eslint”: "^8.22.0”,
“eslint-plugin-vue”: "^9.3.0”,
“sass”: "^1.60.0”,
“typescript”: "^5.0.0”,
“unplugin-fonts”: "^1.0.3”,
“vite”: "^4.2.0”,
“vite-plugin-vuetify”: "^1.0.0”,
“vue-tsc”: “^1.2.0”
}

4

Okey, so it’s explained in the link I posted in last comment.
In your package.json you have ^ which means ‚install the version with newest MINOR (the middle number) version’.
So if you have:
^2.15.13
And the versions available are
2.15.47
2.16.1
3.0.219
Running ‚npm i’ will install the - 2.16.1

5

Yeah……you just confused the hell out of me.

So running

npm i @babylonjs/core

wont install version 6.38.0?

6

Try npm update.

7

Says I am up to date.

8

Sorry, I mistaken ^ with the ~.
Tilde (~) is for PATCH only.
Caret (^) is for MINOR.

I wasn’t using npm for some time, I use yarn.
But AFAIR if you run

I think you will install the newest version locally.
I don’t know if that respects package.json so this could lead to the mismatch of node_modules and your package.json.
If the core would be v7 and you would have version 6 specified in package.json there is possibility that you would install v7 this way and bypass the package.json configuration.

Anyway I recommend you to know what you’re doing. If you want to update version of the package change its version in the package.json and run ‘npm i’.
You should also use lock file to not break your dependencies - do you use it?

9

Yes, I am actually having an issue with getting a GUI Button to work, and I see others having mismatch babylons.

So if I delete my noe_module folder and the package lock.json file….then adding the 6.38.0 to the babylon dependencies will update me to the 6.38.0?

10

Yes, if you want to install the specific version of the library you should

  1. Remove node_modules folder
  2. Change in package.json to the specific version (without ~ or ^), so just “6.38.0”
  3. Run ‘npm i’
  4. If you use lock file you should see changes there confirming your change
11

That did the trick. All updated.

But stil have this weird button error.

Argument of type ‘Button’ is not assignable to parameter of type ‘Control’.
Types have separate declarations of a private property ‘_alpha’.ts(2345)

Button code:

const button = GUI.Button.CreateSimpleButton(‘btn’, 'Button’);

    button.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    button.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;

    button.width = ‘100px’;
    button.height = ‘50px’;
    button.left = '30%’;
    button.top = ‘30px’;

    advancedTexture.addControl(button);

The

let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI”);

Is being declared above for some text.

Thought the upgrade would clear this….

12

Getting rid of the “GUI” infront of the button fixed the issue. That’s how it is on the example PG in the docs.

1 Like
13

I’m happy that you’ve resolved your problem.

Can you clarify - is the docs ok? Do you think the docs should be updated?

14

Sorry @neu5 yes it was in the docs and I actually grabbed the code from the PG there, and usually just getting rid of the ‘BABYLON.” clears up the code not working but this tie is was balking at something else but not really saying it was the “GUI” reference……I just tried it without it and it worked as expected.

15

Thanks for the explanation!
Can you provide the specific PG with the wrong code so that the @babylon team can fix it or would you try to create fix on your own?

16

When using the UMD package style (babylonjs) you get the entire babylon namespace populated for you. whn using babylonjs-gui (the package), you will have BABYLON.GUI populated for you as well.

A better, or more modern way of doing things is to use he es6 packages we provide (@babylonjs/core and @babylonjs/gui). You need to choose one of the paths, and only one. Looking at your package.json, it seems like you are using both.

Regarding the example from the playground - the playground is using the UMD packages, and for a reason - it is quicker to get started and simpler to understand. To use the es6 packages you will need to import every class you are using. So, from your example, you shouldn’t use namespaces (BABYLON, or GUI), but import Button from the GUI package and use it directly.

1 Like