"ReferenceError: document is not defined" in Typescript/next.js compiling

[tdanlin]

• 3d-tiles-renderer version: 0.4.0
• three.js version: 0.172.0
• Link to your project: using typescript + next.js + react

does any one encounter the problem when import TilesRenderer in typescript project? how to solve this issue?

the full "npm run build" error as follow:
unhandledRejection ReferenceError: document is not defined
at createElementNS (file:///C:/Users/Kicki/Documents/Nadi/ocms/cplp_client_all/client/node_modules/three/build/three.core.js:1537:2)
at createCanvasElement (file:///C:/Users/Kicki/Documents/Nadi/ocms/cplp_client_all/client/node_modules/three/build/three.core.js:1543:17)
at new WebGLRenderer (file:///C:/Users/Kicki/Documents/Nadi/ocms/cplp_client_all/client/node_modules/three/build/three.module.js:14735:13)
at new (file:///C:/Users/Kicki/Documents/Nadi/ocms/cplp_client_all/client/node_modules/3d-tiles-renderer/src/plugins/three/gltf/metadata/utilities/TextureReadUtility.js:14:21)
at file:///C:/Users/Kicki/Documents/Nadi/ocms/cplp_client_all/client/node_modules/3d-tiles-renderer/src/plugins/three/gltf/metadata/utilities/TextureReadUtility.js:10:26
at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:316:24) {
type: 'ReferenceError'
}

I can avoid this by modifying TextureReadUtility.js as follow

however, I don't know if this is a good way...

[gkjohnson]

There are plenty of projects using this project with typescript. I suspect the problem is with next.js but I don't know anything about that library and there hasn't been much context provided for how the tiles renderer is being initialized.

[tdanlin]

yes, it should be related to next.js or its server side render issue, it happened when executing - "npm run build",
in the stage of "npm run build", the system just don't have "document" or "window" object, so I just add a "document" check in TextureReadUtility.js to avoid build error...

[gkjohnson]

But this happens with three.js WebGLRenderer class. How are you using this class in next.js with no renderer?

[tdanlin]

I didn't use WebGLRenderer in no render particularly, I just import TileRenderer from '3d-tiles-renderer' in my js codes somewhere, and the build error show up like this:

if I remove the reference of '3d-tiles-renderer', the error would not occurred.

[gkjohnson]

I'm wondering why you're instantiating a TilesRenderer with no three.js renderer in the first place. Please describe your use case so I can understand what you're trying to do and why you are using the project this way.

[tdanlin]

I didn't instantiate a TileRenderer, I think the scenario is I some where imported the TileRenderer, and it imports second level js files, and so on..., when it gets to TextureReadUtility.js, inside this file it instanciates a class with an instance of WebGLRednerer in it

I also provide a sample next.js project in the attached file that can reproduce this issue,
./pages/example.tsx is where I import the "3d-tiles-renderer", in the client folder, run "npm install" then "npm run build", the build error will show up, thanks for your patient!
client.zip

[gkjohnson]

I didn't instantiate a TileRenderer, I think the scenario is I some where imported the TileRenderer,

Sorry I'm struggling here - maybe I don't understand the purpose of next.js. But if you're not instantiating or using TilesRenderer then why are you importing it? In your example file the TilesRenderer is created but not used at all. The TilesRenderer is designed to be used and rendered in a browser with WebGLRenderer so I'm trying to understand why it would be imported and be instantiated, apparently, in a server context? And without a renderer? Is this necessary?

[tdanlin]

next.js consists of 2 parts, server render and client render(borwser), when executing "npm run build", it compiles them all and build intermediate data into a .next folder for the later "npm run start", so sometimes we use 'if( typeof(document) !== "undefined" )' to determine whether it is in server or client codes. that's why I suggested in my first post.(by not new TextureReadUtility directly, server codes definately don't want to new a WebGLRenderer)

the example file is just an example I want to point out this situation, of course I want to use tile renderer in only the browser rendering, but next.js will scan the tile renderer codes in his "npm run build" process(server render).

I'm not a fan of next.js, but since our works base on it, I just like to seek a way to use 3d-tiles-renderer in it :)

[gkjohnson]

Okay - this seems like a bit of an odd requirement to levy on every library that's designed and built for running on a client in a browser but I understand it's out of your control.

I adjust the TextureReadUtility in 517b1d4 to only instantiate renderer classes when they're actually used, which should hopefully fix the issue in the next release.