Register and use <babylon> BabylonViewer in VueJs properly with npm

As I installed the “babylonjs-viewer” via npm and when I imported this it’s giving me errors that there are no babylonjs-loaders/glTF/glTFLoader etc (I crossed checked and there was no folder “glTF” inside babylonjs-loaders).
Also, when I tried with “@babylonjs/viewer” via npm, viewer is working now. But, I have to reload the page forcefully on browser (refresh the page) to work rightly.
2nd is working but it’s not acceptable because I have to reload the page manually, otherwise it’s giving me error that “<babylon>” is not registered properly (checked on developer tool console)

pinging @RaananW

Hey @Shamsail,

I am sorry, but I don’t quite get the issue. I will be happy to see a reproduction of the error or a very simple HTML code that i can execute locally so that i can understand the issue better

Hi @RaananW , thanks for your reply. As I said, there are two packages

  1. babylonjs-viewer (via npm)
  2. @babylonjs/viewer (via npm)

About 1st one, when I did “npm install --save babylonjs-viewer” , it’s installed but when I import it , "import BabylonViewer from ‘babylonjs-viewer’ " , it’s giving me error that babylonjs-loaders/glTF/glTFLoaders file is not present and so on (babylonjs-loaders is also installed when I installed babylonjs-viewer) , seems like it’s “babylonjs-viewer” package fault. I am not using it now just because of its errors.

About 2nd one, I installed “npm install --save @babylonjs/viewer” that comes with @babylonjs/core @babylonjs/loaders , now it’s working.
My issue in 2nd one was about that sometimes viewer is loaded or sometimes not. (it’s not error of package) , It’s working but to use in VueJs I have to reload the page manually that was the drawback. Now it’s working perfectly , As I have used localstorage variable to reload the route automatically.

1st one is the error from package (that you guys should see), 2nd one error is from VueJs but @babylonjs/viewer is working now with automatically reload the route to enforce vuejs to pickup <babylon> tag.

Thanks for your time

1 Like

thanks for taking the time to explain! :slight_smile:

So - issue 1 will be investigated. It’s the first time i see that. It might be the loading order - the loaders need to be loaded after the viewer (as the viewer has the babylon reference), but not after the model is initially loaded. Might be tricky with a build system.

I would anyhow suggest you to use the es6 version in those kinds of apps. which yo are doing.

1 Like