"RangeError: Maximum call stack size exceeded" when using GLTF Loader

[andreademasi]

Hi everyone, I'm trying to load a GLTF model in Gatsby but I get the error stated in the title when using useLoader() hook. The model is in static folder and accessible at "/model.gltf".
This is my code:

function Object({ url }) {
  const gltf = useLoader(GLTFLoader, url)
  return <primitive object={gltf.scene} dispose={null} />
}

const Content = ({ modelPath }) => {
  return (
    <group dispose={null}>
      <mesh position={[0, -35, 0]}>
        <Object url={modelPath} />
      </mesh>
    </group>
  )
}

const Model = ({ modelPath }) => {
  return (
    <Canvas colorManagement camera={{ position: [0, 0, 120], fov: 70 }}>
      <Lights />
      <Suspense fallback={null}>
        <Content modelPath={modelPath} />
      </Suspense>
    </Canvas>
  )
}

Could there be an infinite loop I'm missing?

[Nick-Andrews]

`import React,{ useRef} from 'react'
import { useLoader} from 'react-three-fiber'
import * as THREE from "three";
import {map} from "lodash";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

function Loader(props ){
const b = useRef();
const gltf = useLoader(GLTFLoader, props.url);
let meshes = gltf.scene.children;
let modelParts = map(meshes, (el, ii) => {
if( meshes[ii] instanceof THREE.Group){
meshes[ii].children.forEach(function(m){
m.castShadow=true;
m.receiveShadow=true;
})
}
return (
<primitive
position = {meshes[ii].position}
object={el.clone()}
key={meshes[ii].name+"office"+ii}
name={meshes[ii].name}
/>
)
})
return modelParts;
}

export default Loader;`

[Nick-Andrews]

Sorry, not sure how to indent that properly. I have been playing with r3f a lot lately and I use this component to load my gltf files

[andreademasi]

My bad, I shouldn't have named my component "Object", changing the name fixed the issue