Hi Christopher, welcome to the forum.

The screen grab is too low res to see anything, it would be better if you posted the relevant code directly as text.

Here’s a link to my github repo 03juan/three_cube

My previous answer was actually misleading, sorry about that. I actually got the error after installing the three module from npm into the vendor directory, and then importing from ../vendor/node_modules/three/build/three.min.js, not directly from ../vendor/three.min.js. I assumed that the error would also show in the second case but didn’t check before posting.

Have a look at app.js in the repo. In its current state importing from node_modules I get the error when building the asset, and there is no cube. However using the import in the second line does show the cube, and the console only shows the warning:
Scripts "build/three.js" and "build/three.min.js" are deprecated with r150+, and will be removed with r160. Please use ES Modules or alternatives

I tried to build the bundle with esbuild 0.14.29 used in Phoenix 1.6.13 and that also works when importing three.min.js directly from vendor but not from within node_modules.

Not sure why it works with one but not the other. My guess is something to do with it being a inside node package, but don’t have enough experience with js bundling to really know.

This won’t succeed because it returns undefined when the attribute is missing.

However you also will need to add phx-update="ignore" to the element, otherwise your scene will be removed on the next update from the server.

DOM patching & temporary assigns

The “ignore” behaviour is frequently used when you need to integrate with another JS library. Note only the element contents are ignored, its attributes can still be updated.