Closed AnesBkdm closed 1 week ago
HamzaSalam
commented
1 week ago Ensure that the versions of three, @react-three/fiber, and @react-three/drei are compatible with React 18.0 and Expo 51. Sometimes, newer versions of these libraries may introduce breaking changes or incompatibilities with Expo. May your cache is not clear because sometimes, learing the cache and reinstalling all dependencies can resolve unexpected issues
AnesBkdm
commented
1 week ago Thank you for your response Hamza. As I have described, I know that it is @react-three/drei that is at fault, hence me asking here. What I actually wanted to know is if there is any known compatibility issues with Drei and the aforementioned packages, especially the React package since there was version problems in the past.
AnesBkdm
commented
1 week ago I realise I haven't posted the error itself:
Unable to resolve module react-dom/client from /Users/anesbkdm/meteora-audio/record-display/node_modules/@react-three/drei/index.cjs.js: react-dom/client could not be found within the project or in these directories:
node_modules/@react-three/drei/node_modules
node_modules
> 1 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom/client"),n=require("three"),a=require("@react-three/fiber"),o=require("zustand"),i=require("@use-gesture/react"),s=require("maath"),l=require("@react-spring/three"),c=require("zustand/middleware"),u=require("three-stdlib"),d=require("zustand/shallow"),m=require("troika-three-text"),f=require("suspend-react"),p=require("meshline"),h=require("camera-controls"),x=require("stats.js"),y=require("stats-gl"),v=require("detect-gpu"),g=require("three-mesh-bvh"),w=require("react-composer"),z=require("@monogrid/gainmap-js"),b=require("uuid"),M=require("tunnel-rat");function E(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function S(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var T=E(e),C=S(t),P=S(r),R=S(n),D=E(o),F=E(d),k=E(h),_=E(x),A=E(y),L=E(w),B=E(M);const I=new n.Vector3,U=new n.Vector3,V=new n.Vector3,O=new n.Vector2;function N(e,t,r){const n=I.setFromMatrixPosition(e.matrixWorld);n.project(t);const a=r.width/2,o=r.height/2;return[n.x*a+a,-n.y*o+o]}const j=e=>Math.abs(e)<1e-10?0:e;function W(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=j(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const G=(H=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>W(e,H));var H;const $=(e,t)=>{return W(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r};const q=C.forwardRef((({children:e,eps:t=.001,style:r,className:o,prepend:i,center:s,fullscreen:l,portal:c,distanceFactor:u,sprite:d=!1,transform:m=!1,occlude:f,onOcclude:p,castShadow:h,receiveShadow:x,material:y,geometry:v,zIndexRange:g=[16777271,0],calculatePosition:w=N,as:z="div",wrapperClass:b,pointerEvents:M="auto",...E},S)=>{const{gl:R,camera:D,scene:F,size:k,raycaster:_,events:A,viewport:L}=a.useThree(),[B]=C.useState((()=>document.createElement(z))),W=C.useRef(),H=C.useRef(null),q=C.useRef(0),X=C.useRef([0,0]),Z=C.useRef(null),Q=C.useRef(null),Y=(null==c?void 0:c.current)||A.connected||R.domElement.parentNode,K=C.useRef(null),J=C.useRef(!1),ee=C.useMemo((()=>f&&"blending"!==f||Array.isArray(f)&&f.length&&function(e){return e&&"object"==typeof e&&"current"in e}(f[0])),[f]);C.useLayoutEffect((()=>{const e=R.domElement;f&&"blending"===f?(e.style.zIndex=`${Math.floor(g[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)}),[f]),C.useLayoutEffect((()=>{if(H.current){const e=W.current=P.createRoot(B);if(F.updateMatrixWorld(),m)B.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=w(H.current,D,k);B.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return Y&&(i?Y.prepend(B):Y.appendChild(B)),()=>{Y&&Y.removeChild(B),e.unmount()}}}),[Y,m]),C.useLayoutEffect((()=>{b&&(B.className=b)}),[b]);const te=C.useMemo((()=>m?{position:"absolute",top:0,left:0,width:k.width,height:k.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:s?"translate3d(-50%,-50%,0)":"none",...l&&{top:-k.height/2,left:-k.width/2,width:k.width,height:k.height},...r}),[r,s,l,k,m]),re=C.useMemo((()=>({position:"absolute",pointerEvents:M})),[M]);C.useLayoutEffect((()=>{var t,n;(J.current=!1,m)?null==(t=W.current)||t.render(C.createElement("div",{ref:Z,style:te},C.createElement("div",{ref:Q,style:re},C.createElement("div",{ref:S,className:o,style:r,children:e})))):null==(n=W.current)||n.render(C.createElement("div",{ref:S,style:te,className:o,children:e}))}));const ne=C.useRef(!0);a.useFrame((e=>{if(H.current){D.updateMatrixWorld(),H.current.updateWorldMatrix(!0,!1);const e=m?X.current:w(H.current,D,k);if(m||Math.abs(q.current-D.zoom)>t||Math.abs(X.current[0]-e[0])>t||Math.abs(X.current[1]-e[1])>t){const t=function(e,t){const r=I.setFromMatrixPosition(e.matrixWorld),n=U.setFromMatrixPosition(t.matrixWorld),a=r.sub(n),o=t.getWorldDirection(V);return a.angleTo(o)>Math.PI/2}(H.current,D);let r=!1;ee&&(Array.isArray(f)?r=f.map((e=>e.current)):"blending"!==f&&(r=[F]));const a=ne.current;if(r){const e=function(e,t,r,n){const a=I.setFromMatrixPosition(e.matrixWorld),o=a.clone();o.project(t),O.set(o.x,o.y),r.setFromCamera(O,t);const i=r.intersectObjects(n,!0);if(i.length){const e=i[0].distance;return a.distanceTo(r.ray.origin)<e}return!0}(H.current,D,_,r);ne.current=e&&!t}else ne.current=!t;a!==ne.current&&(p?p(!ne.current):B.style.display=ne.current?"block":"none");const o=Math.floor(g[0]/2),i=f?ee?[g[0],o]:[o-1,0]:g;if(B.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=I.setFromMatrixPosition(e.matrixWorld),a=U.setFromMatrixPosition(t.matrixWorld),o=n.distanceTo(a),i=(r[1]-r[0])/(t.far-t.near),s=r[1]-i*t.far;return Math.round(i*o+s)}}(H.current,D,i)}`,m){const[e,t]=[k.width/2,k.height/2],r=D.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:a,left:o,bottom:i,right:s}=D,l=G(D.matrixWorldInverse),c=n?`scale(${r})translate(${j(-(s+o)/2)}px,${j((a+i)/2)}px)`:`translateZ(${r}px)`;let m=H.current.matrixWorld;d&&(m=D.matrixWorldInverse.clone().transpose().copyPosition(m).scale(H.current.scale),m.elements[3]=m.elements[7]=m.elements[11]=0,m.elements[15]=1),B.style.width=k.width+"px",B.style.height=k.height+"px",B.style.perspective=n?"":`${r}px`,Z.current&&Q.current&&(Z.current.style.transform=`${c}${l}translate(${e}px,${t}px)`,Q.current.style.transform=$(m,1/((u||10)/400)))}else{const t=void 0===u?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=I.setFromMatrixPosition(e.matrixWorld),n=U.setFromMatrixPosition(t.matrixWorld),a=t.fov*Math.PI/180,o=r.distanceTo(n);return 1/(2*Math.tan(a/2)*o)}return 1}(H.current,D)*u;B.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}X.current=e,q.current=D.zoom}}if(!ee&&K.current&&!J.current)if(m){if(Z.current){const e=Z.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){const{isOrthographicCamera:t}=D;if(t||v)E.scale&&(Array.isArray(E.scale)?E.scale instanceof n.Vector3?K.current.scale.copy(E.scale.clone().divideScalar(1)):K.current.scale.set(1/E.scale[0],1/E.scale[1],1/E.scale[2]):K.current.scale.setScalar(1/E.scale));else{const t=(u||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;K.current.scale.set(r,n,1)}J.current=!0}}}else{const t=B.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){const e=1/L.factor,r=t.clientWidth*e,n=t.clientHeight*e;K.current.scale.set(r,n,1),J.current=!0}K.current.lookAt(e.camera.position)}}));const ae=C.useMemo((()=>({vertexShader:m?void 0:'\n /*\n This shader is from the THREE\'s SpriteMaterial.\n We need to turn the backing plane into a Sprite\n (make it always face the camera) if "transfrom"\n is false.\n */\n #include <common>\n\n void main() {\n vec2 center = vec2(0., 1.);\n float rotation = 0.0;\n\n // This is somewhat arbitrary, but it seems to work well\n // Need to figure out how to derive this dynamically if it even matters\n float size = 0.03;\n\n vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n vec2 scale;\n scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n\n bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n if ( isPerspective ) scale *= - mvPosition.z;\n\n vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;\n vec2 rotatedPosition;\n rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n mvPosition.xy += rotatedPosition;\n\n gl_Position = projectionMatrix * mvPosition;\n }\n ',fragmentShader:"\n void main() {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n }\n "})),[m]);return C.createElement("group",T.default({},E,{ref:H}),f&&!ee&&C.createElement("mesh",{castShadow:h,receiveShadow:x,ref:K},v||C.createElement("planeGeometry",null),y||C.createElement("shaderMaterial",{side:n.DoubleSide,vertexShader:ae.vertexShader,fragmentShader:ae.fragmentShader})))}));let X=0;const Z=D.default((e=>(n.DefaultLoadingManager.onStart=(t,r,n)=>{e({active:!0,item:t,loaded:r,total:n,progress:(r-X)/(n-X)*100})},n.DefaultLoadingManager.onLoad=()=>{e({active:!1})},n.DefaultLoadingManager.onError=t=>e((e=>({errors:[...e.errors,t]}))),n.DefaultLoadingManager.onProgress=(t,r,n)=>{r===n&&(X=n),e({active:!0,item:t,loaded:r,total:n,progress:(r-X)/(n-X)*100||100})},{errors:[],active:!1,progress:0,item:"",loaded:0,total:0})));const Q=e=>`Loading ${e.toFixed(2)}%`;const Y={container:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"#171717",display:"flex",alignItems:"center",justifyContent:"center",transition:"opacity 300ms ease",zIndex:1e3},inner:{width:100,height:3,background:"#272727",textAlign:"center"},bar:{height:3,width:"100%",background:"white",transition:"transform 200ms",transformOrigin:"left center"},data:{display:"inline-b
RCTFatal
RCTConvertArrayValue
81D355DF-266A-3010-BAB8-113B76A206C1
81D355DF-266A-3010-BAB8-113B76A206C1
81D355DF-266A-3010-BAB8-113B76A206C1
_dispatch_main_queue_callback_4CF
00E76A98-210C-3CB5-930B-F236807FF24C
00E76A98-210C-3CB5-930B-F236807FF24C
CFRunLoopRunSpecific
GSEventRunModal
1741FA37-4E53-371E-8DAE-D611AAB0043D
UIApplicationMain
main
71846EAC-EE65-3697-BF7D-790B6A07DCDBIssue solved by switching package managers and restarting the project from an empty Expo 51 project.
For those who might encounter similar issues while building 3D projects using Expo: for anything Three/Fiber/Drei relate, always make sure to use Yarn instead of NPM from the start. These packages have several dependencies issues intertwined, and NPM seems to struggle in building them.
threeversion: 0.168.0@react-three/fiberversion: 8.17.6@react-three/dreiversion: 9.96.5nodeversion: 19.9.0npm(oryarn) version: 9.6.3Problem description:
While implementing three for expo-three on Expo, I am facing the issue of unresolved React DOM. After some digging, I have seen that it is a versioning issue, and that having React 18+ would solve that. It was already the case for my project.
I have tried to install drei, fiber, three and expo-three with different combinations and with --force or --legacy-peer-deps, to no avail.
Another note: my app worked correctly on Expo 49 (where I developed the 3D function of the app). It already had dependecy issues, which has been solved with --force, but it is only after porting it to the full Expo 51 app that this issue appeared.
Has anyone faced this issue before? See the full dependency tree below. I would appreciate the help.
Relevant code: