GUI seems not to be working when unisng BJS in VueJS

When I import BJS (import * as BABYLON from 'babylonjs') inside VueJS I don’t have access to GUI, so I had to install and import babylonjs-gui manually. (import * as GUI from 'babylonjs-gui').

GUI is working well when I create a Button, but it gives me an error when I try to create inputText/Rectangle/…

The error is:
TypeError: Cannot set property name of #<Object> which has only a getter

It is very hard to help without some form a reproduction. The error is a pure javascript error, something is trying to change a property to which there is no setter. might be some auto-magic thing Vue is doing?

If you can reproduce it simply somewhere, it would be very helpful.

Also, a small suggestion (that I am pretty sure is not going to directly fix this) would be to use out es6 npm packages instead of our UMD packages (@babylonjs/core and @babylonjs/gui), especially if you use a modern library like vue.

1 Like

LOL
It worked!!!
You just saved my life. I didn’t know about the ES6 packages.

Thank you very much.

God bless you.

1 Like

Hey Raanan, can you elaborate on where to install or type this into the setup?

I tried the following, as @Neimeg tried, and wasn’t able to access GUI when hitting Ctrl+Space after typing it.
image

My Setup is in Typescript, using NPM/Webpack, in case that makes any difference… ?

Hi!

Now 100% what you are asking. Is the variable GUI not available? Or is it just the auto-complete not working?

Have you tried using the es6 packages instead of the UMD packages?

I think the variable GUI is not available. I noticed I have to type “___.GUI” then hit Ctrl+Space to open up the panel where it activates(?) the actual GUI thing, and the text for “GUI” turns green… right? That part is not working.
“GUI” is not appearing in the popup, in order for me to select it.

I don’t fully understand what it is because I’m working from a template that I cloned from a blog, but is this es6 package something I need to install to VSC? or do I need to import or download it to a location in my folder structure? Sry if my question and explanation is very scrambled! I’m still trying to conceptual grasp what is doing what haha

What editor are you using? VS Code is just one of many, and they all should work correctly.

There is no reason the GUI variable will not be defined, especially if you are building correctly. Is it just the editor, or is the variable missing in code as well? Have you tried importing the classes you need, instead of importing all to a single variable? just like you are doing in the 3rd line, loading PBRMaterial dierctly, instead of the entire namespace?

I’m using Vscode, yes.

Import like this?


When i mouse over the error i get this popup:
image