Error in NextJS 14 with React Demo

[rrrovalle]

I'm using the React demo as a base for a NextJS 14 application. After configuring and importing all files (I believe I imported all), when testing, I receive the error
'not-found-boundary.js:22 Uncaught TypeError: Cannot read properties of null (reading 'videoWidth')',
which is being triggered in the VTOThreeHelper. Has anyone encountered this before and knows how to fix it? I might have forgotten to import something

[xavierjs]

Probably related to jeeliz/jeelizFaceFilter#283 (not the same lib but the same technical core and very similar interface)

[rrrovalle]

Hello! Thank you :-) it makes a lot of sense! I'll try to solve it following this line

[rrrovalle]

Hello again!

I've made the code change to force client-side rendering, but I'm still encountering the same issue when running the init() on HandTrackerTreeHelper.

import dynamic from 'next/dynamic';

const DemoVTO = dynamic(() => import('@/hook/VTO'), { ssr: false });

export default function Page() {
    return (
        <>
            <div className="mx-auto max-w-800px border-l-1 border-solid border-gray-300 pl-8">
                <DemoVTO />
            </div>
        </>
    );
}

I've spent quite a few hours searching for a solution, but I'm feeling lost since I can't look into the module.js code, and the error is confusing and very specific. Any insights on a path I could follow to try to resolve the issue?

TypeError: Cannot read properties of null (reading 'videoWidth')
src\contrib\WebARRocksHand\helpers\WebARRocksHand.module.js (37:356) @ videoWidth
X.translationScalingFactorsScan;A.Dg("u49",b[0]*e[0]*V.H[0],b[1]*e[1]*V.H[1],b[2]*e[2]);R.va&&A.F("u45",d.rz);ba.Ie("u44");b=1;e=ba.Jg(Pa,pa,V.o/V.J);ba.de()&&(e&&(b=0,Pa[a].ya=0,d.isDetected=!1,d.detected=0,Qa.pg(a)),A.F("u52",b));A.Eg("u48",Qa.get(a));Q.l(!1,!1);if(ba.ce()||e)c.viewport(1,a,1,1),A.set("s66"),A.F("u52",b),Q.l(!1,!1);ba.ce()&&(c.viewport(2,a,Ma.Jc,1),A.set("s67"),Q.l(!1,!1));fa.Ca.sync()}function Pb(){D.D&&D.D.remove();D.Kb=D.element.isFakeVideo?!0:!1;var a=null;D.Kb?a={isFlipY:!1,
  36 | array:D.element.arrayBuffer,width:D.element.videoWidth,height:D.element.videoHeight,isKeepArray:!0}:D.element&&(a={K:D.element});D.ad=Z.instance(Object.assign({isPot:!1,isLinear:!0,isFloat:!1},a));D.D=D.ad}function Ua(){var a=[{type:"mat2",name:"u41",value:D.B}];A.P("s65",[{type:"1i",name:"u1",value:0}].concat(a));A.P("s64",a)}function Va(){var a=[.5,.5],b=D.H[1]/D.H[0],d=Ha.aa()/Ha.I();90===Math.abs(wa.rotate)&&(b=1/b);b>d?a[1]*=d/b:a[0]*=b/d;A.P("s63",[{name:"u54",type:"1f",value:d}]);D.B[0]=0;
> 37 | D.B[1]=0;D.B[2]=0;D.B[3]=0;switch(wa.rotate){case 0:D.B[0]=a[0];D.B[3]=a[1];break;case 180:D.B[0]=-a[0];D.B[3]=-a[1];break;case 90:D.B[1]=a[0];D.B[2]=-a[1];break;case -90:D.B[1]=-a[0],D.B[2]=a[1]}D.ga[0]=D.B[0];D.ga[1]=D.B[1];D.ga[2]=D.B[2];D.ga[3]=D.B[3];D.eb||(D.B[1]*=-1,D.B[3]*=-1);D.eb&&D.Wd&&(D.ga[1]*=-1,D.ga[3]*=-1)}function zb(){var a=D.element.videoWidth,b=D.element.videoHeight,d=D.H[0]!==a||D.H[1]!==b;d&&(D.H[0]=a,D.H[1]=b);return d}function $a(a,b){if(ha===ea.error)return!1;D.element=a;
     |                                                                                                                                                                                                                                                                                                                                                                  ^
  38 | zb();b&&b();return!0}function Ab(a){D.Kc&&D.Kc();D.Ua={video:{focusMode:{ideal:"continuous"},facingMode:{ideal:wa.facingMode},width:{min:wa.minWidth,max:wa.maxWidth,ideal:wa.idealWidth},height:{min:wa.minHeight,max:wa.maxHeight,ideal:wa.idealHeight}},audio:!1};Y.od(D.Ua,wa.deviceId);Y.get(D.element?D.element:Y.Od(),function(b){D.Mc&&D.Mc(b);a(b)},function(){Ra("WEBCAM_UNAVAILABLE")},D.Ua)}function Ra(a){ha!==ea.error&&(ha=ea.error,R.Ta&&R.Ta(a))}function sc(){for(var a=ma.length,b=0;b<a;++b){var d=
  39 | ma[b],e=d.W;e&&!0===e.isRightHand&&(e=Object.assign({},e,{isRightHand:!1}),ma.push({Uc:d.Uc,W:e,id:d.id?d.id.replace("_R","_L")+"(GEN)":"GEN",Z:d.Z,X:-1,ea:-1,model:d.model,Nc:d.Nc}))}}function Qb(a){a.forEach(pc);ta.vf&&sc();ma.forEach(function(b,d){b.ea=d});ic();yb();xb()}function tc(a){if(!rc())return!1;A.pb([{id:"s65",name:"_",Da:"attribute vec2 a0;uniform mat2 u41;varying vec2 vv0;void main(){gl_Position=vec4(a0,0.,1.),vv0=vec2(.5,.5)+u41*a0*vec2(1.,-1.);}",ub:["a0"],Qa:[2],g:"uniform sampler2D u1;varying vec2 vv0;void main(){gl_FragColor=texture2D(u1,vv0);}",
  40 | i:["u1","u41"],precision:"lowp"},{id:"s64",name:"_",g:"uniform sampler2D u1;varying vec2 vv0;void main(){gl_FragColor=texture2D(u1,vv0);}",Da:"attribute vec2 a0;uniform sampler2D u42;uniform mat2 u41;uniform vec2 u43;uniform float u44,u40,u45,u46;varying vec2 vv0;void main(){vec2 d=a0*vec2(u46,1.);vec4 a=texture2D(u42,vec2(u40,u44));vec2 f=a.gb,g=a.a*u43;float b=cos(u45),c=sin(u45);vec2 h=mat2(b,c,-c,b)*d,i=f+.5*h*g;vv0=.5+2.*u41*(i-.5),gl_Position=vec4(a0,0.,1.);}",ub:["a0"],Qa:[2],i:"u1 u42 u43 u44 u40 u45 u46 u41".split(" "),

[xavierjs]

Hello,

It seems you are not providing the video or this code is interpreted on the server side.
I can provide development services to help you fix your bug.
You can send a request to contact__at__webar.rocks