r.setValue is not a function error in production

[MutatedGamer]

This component renders fine when I'm developing and viewing with npm start, but after running npm run build and uploading the build to my production server, I just get this error in console:

react-3d-viewer.js:6821 Uncaught TypeError: r.setValue is not a function
    at $n.setValue (react-3d-viewer.js:6821)
    at Be (react-3d-viewer.js:9198)
    at Ar.renderBufferDirect (react-3d-viewer.js:8970)
    at Ue (react-3d-viewer.js:9113)
    at De (react-3d-viewer.js:9100)
    at Ar.render (react-3d-viewer.js:9312)
    at Object.fuc (react-3d-viewer.js:17663)
    at react-3d-viewer.js:21729
    at Array.forEach (<anonymous>)
    at e (react-3d-viewer.js:21726)

repeatedly, and the object is never rendered.

Any idea what could be causing this?

[Ailanz]

Having the same problem. Have you find a solution to get around this?

[Ailanz]

@dwqdaiwenqi any idea how to fix this? Thanks so much!

[Ailanz]

ok I fixed this. I had to compile this locally with a few changes to the imports. but it works in prod build now.

[UltimateForm]

@Ailanz what changes??

[Ailanz]

@UltimateForm I dont remember exactly as I incorporated it into my own project. But just make a fork and build it locally and fix any errors that comes up.

[UltimateForm]

@Ailanz do you remember having this issue? Attempted import error: 'BufferGeometryUtils' is not exported from 'three' (imported as 'THREE').

seems to be related to global variable of THREE missing, however setting the window.THREE = THREE did not fix it

[Ailanz]

yes. Don't have my code with me at the moment but Three is the web gl 3d framework. Take a look at their examples.

[UltimateForm]

@Ailanz I know what Three is and I've taken a look a their examples, the issue is that their example modules assume the existence of the Three as a global variable and I cannot seem to be able make it work. I can import the modules separately, like

global.THREE = THREE = require('three')
require('three/examples/js/utils/BufferGeometryUtils.js')

with either global or window, and no matter which approach I taken (i've experimented a few), I always end up on the same error:

Failed to compile.

./src/components/react-3d-viewer/node_modules/three/build/three.module.js
  Line 21509:  'XRDevice' is not defined                                              no-undef
  Line 21540:  'XRWebGLLayer' is not defined                                          no-undef
  Line 21709:  'THREE' is not defined                                                 no-undef
  Line 35667:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

I have taken a look at alternatives to see what they've done but the code is usually not all present or lacking support for what I want (GLTF), it'd be a great help if you could remember how you fixed any of these issues

[JoeCase]

Anyone make on progress on this with more specifics? Really need a fix.

[sonicsmith]

Same problem here. Works fine locally, but not when hosted online.

[sonicsmith]

Ok, I managed to solved it using the method @Ailanz mentioned. @UltimateForm , I came a across the same issue you hit, but then reimported the missing classes through the "examples". eg Here is a snipit of the top of my altered "loader.js" file:

import * as OLD_THREE from 'three';
import { BufferGeometryUtils as NewBufferGeometryUtils} from "three/examples/jsm/utils/BufferGeometryUtils.js"
import { GLTFLoader as NewGLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
import { MTLLoader as NewMTLLoader} from "three/examples/jsm/loaders/MTLLoader.js"
import { OBJLoader as NewOBJLoader} from "three/examples/jsm/loaders/OBJLoader.js"

var THREE = OLD_THREE

THREE.BufferGeometryUtils = NewBufferGeometryUtils
THREE.GLTFLoader = NewGLTFLoader
THREE.MTLLoader = NewMTLLoader
THREE.OBJLoader = NewOBJLoader

[Ailanz]

It should be pretty straight forward. As @sonicsmith mentioned, just make sure you have all the dependencies needed.

Also one thing I noticed is that the style props does not propogate all the way through, it only forwards a set of style keys which can be problematic for responsive web (webgl canvas size is not responsive here). So make sure to extend it and pass through the style props if needed.

[UltimateForm]

Importing the examples throgh the official modules was also one of the approaches I tried, but it got me to the same error above, I will try again later

[fsegouin]

Used your fix @sonicsmith but still hitting the same issue. Does anyone have an actual patch to provide? Thanks

[IgnatevAnton]

Hello. Has anyone solved this problem?