Babylon viewer.js with nextjs error

let domElement = document.getElementById(“babylon-element”)!;
let viewer = new BabylonViewer.DefaultViewer(domElement, {
extends: “minimal”,
scene: {
debug: true
},
engine: {
antialiasing: true
},
model: {
url: “https://models.readyplayer.me/633012b09b4c6a4352aba738.glb”,
scaling: {
x: 2.5,
y: 2,
z: 2,
}
}
});

got this error when i tried using babylonviewer.js on my next js project:

Server Error

ReferenceError: self is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

can anyone help? please

Hello and welcome to the Babylon community!

There’s too little information for us to understand what’s going on :slight_smile: Can you share your complete nextjs project?

1 Like

I do not think the viewer would render anyway on the server.

cc @RaananW ?

I am trying to think where we reference “self” in the viewer. self is usually the global variable in a webworker, and this could come from the loader or from parsing certain images. So - I am not sure what triggers the workers here, but this would be the first thing I would check.

Also, as @sebavan mentioned, the viewer will not pre-render while prerendering the page. You would need to place this code in a script that will be executed client-side.

1 Like

I have resolved it i had to use react useEffect and it works fine

1 Like

Yes it’s either i use next js dynamic import or useEffect to let next js know how to handle it on server side, i did use useEffect and it worked

I checked and this was used instead of self, but the self error keeps poping up, useEffect handled it for me tho, i will paste the code on here when i’m on my computer, thanks everyone i really appreciate the replies

1 Like