shadow.getFrameExtents is not a function when castShadow enabled

[milan090]

I am new to three.js as well as react-three-fiber. I was doing a small tutorial on this from youtube and came across this error.
I have a canvas with a directional light, some other ambient and point lights, some meshs and a plane mesh for casting shadow.
The tutorial was bit old and used this code in the directional light

shadow-mapSize-width={1024}
shadow-mapSize-height={1024}
shadow-camera-far={50}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}

This code worked fine and casted the shadows on to the plane mesh.

I found that these properties were deprecated and replaced with this:

shadow={{
            mapSize: {
              width: 1024,
              height: 1024,
              
            },
            camera: {
              far: 50,
              left: -10,
              right: 10,
              top: 10,
              bottom: -10,
            },
          }}

This then threw this error in the browser:

shadow.getFrameExtents is not a function
    at WebGLShadowMap.render (three.module.js:18733)
    at WebGLRenderer.render (three.module.js:24007)
    at renderGl (web.js:77)
    at web.js:103
    at Map.forEach (<anonymous>)
    at renderLoop (web.js:99)

Edit:
I'm using:
"react-three-fiber": "^5.3.19"
"three": "^0.126.1"

[drcmda]

the dashed syntax just writes single values, but if you do shadow={{ camera: { ... you are overwriting entire objects with just an empty class with two props. camera is a real THREE.Camera and after that operation it would just be { far, left, ... }.

[Devang47]

Then what should / can we use? The dashed syntax is deprecated but should we still use it?

[lucasbaze]

Unfortunately I'm not sure either. Ran into the same issue and this seems to be the only thread I can find. I'm just using the dashed syntax as it still works for @react-three/fiber

[GabrieleCicconetti]

i have the same issue and cannot find a way to solve this

[drcmda]

i'm not sure, what is the issue? you can can reach anything with dashed props. mapSize is a vector so even single value shortcuts apply. you can also overwrite entire sub-classes with dashed attach. according to three docs light.shadow.camera is a generic orthographic camera, so this works:

<directionalLight shadow-mapSize={1024}>
  <orthographicCamera attach="shadow-camera" args={[-10, 10, -10, 10, 0.1, 1000]} />

or, longer but more readable

<directionalLight shadow-mapSize={1024}>
  <orthographicCamera attach="shadow-camera" left={-10} right={10} top={-10} bottom={10} near={0.1} far={1000} />

dashed props are not deprecated btw, they work as they always did. writing out single values is OK although i would always prefer attach for bigger class objects.

[drcmda]

ok, digging a little, i think the confusion is about

shadow-mapSize-width={1024}
shadow-mapSize-height={1024}

according to three docs LightShadow.mapSize is a THREE.Vector2: https://threejs.org/docs/index.html?q=dire#api/en/lights/shadows/LightShadow.mapSize so it seems to me threejs must have deprecated "width" and "height" if these were ever real props to begin with that is. in that case, as written above, you can do:

shadow-mapSize={[1024, 1024]}

or, shorter

shadow-mapSize={1024}

if anything like that comes up again, it's always a good idea to consult threejs docs when in doubt, fiber is 1:1 api conform.