Passing a prop to GLTFJSX generated model file gives an error

[RealSnowKid]

The problem I am dealing with is because I have a glb model with a few animations. I currently only wanted to test playing each of them using a separate button to choose between each animation. I used the GLTFJSX file generator to convert the model into a js file and have another file with a simple canvas setup.

The file with the canvas.

import React, { useState } from 'react';
import { Canvas } from "@react-three/fiber";
import Boat from "./Boat.js";

export default function BoatAnim() {
    const [anim, setAnim] = useState("Fly");
    return (
        <>
            <div style={{ position: 'absolute', zIndex: '3' }}>
                <button onClick={() => setAnim("Fly")}>Fly</button>
                <button onClick={() => setAnim("Float")}>Float</button>
            </div>
            <Canvas camera={{ position: [0, 2.5, 20] }}>
                <color attach="background" args={"lightblue"} />
                <directionalLight color={"orange"} intensity={0.5} />
                <ambientLight color={"yellow"} intensity={0.2} />
                <Boat animation={anim} />
            </Canvas>
        </>
    );
}

The model file.

import React, { useRef, useEffect } from 'react';
import { useGLTF, useAnimations } from '@react-three/drei';
import { LoopOnce } from 'three';

export default function Model({ animation, ...props }) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/boat.glb')
  const { actions } = useAnimations(animations, group)

  useEffect(() => {
    console.log("Props", props);
    console.log("Animation", animation);
    actions.Fly.play();
    actions.Fly.setLoop(LoopOnce);
    actions.Fly.clampWhenFinished = true;
  });

  return (
    <group ref={group} {...props} dispose={null}>
      <mesh name="Boat" geometry={nodes.Boat.geometry} material={materials._15211_Wakeboard_v1default} scale={0.05} />
    </group>
  )
}

useGLTF.preload('/boat.glb')

As you can see I have a state set-up that is being assigned by the click of a button, and is being passed into the model. Currently I'm not even really doing anything with it, just console logging it to check that I get the correct input, which I do. However, whenever the state is passed, I get an Uncaught TypeError: argsNew.some is not a function.

Uncaught TypeError: argsNew.some is not a function
    commitUpdate react-three-fiber.esm.js:942
    commitWork react-reconciler.development.js:13427
    commitMutationEffects react-reconciler.development.js:15968
    callCallback react-reconciler.development.js:12184
    invokeGuardedCallbackDev react-reconciler.development.js:12233
    invokeGuardedCallback react-reconciler.development.js:12292
    commitRootImpl react-reconciler.development.js:15682
    unstable_runWithPriority scheduler.development.js:468
    runWithPriority react-reconciler.development.js:2495
    commitRoot react-reconciler.development.js:15551
    performSyncWorkOnRoot react-reconciler.development.js:14857
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
react-three-fiber.esm.js:942
    commitUpdate react-three-fiber.esm.js:942
    commitWork react-reconciler.development.js:13427
    commitMutationEffects react-reconciler.development.js:15968
    callCallback react-reconciler.development.js:12184
    invokeGuardedCallbackDev react-reconciler.development.js:12233
    invokeGuardedCallback react-reconciler.development.js:12292
    commitRootImpl react-reconciler.development.js:15682
    commitRootImpl self-hosted:1279
    unstable_runWithPriority scheduler.development.js:468
    runWithPriority react-reconciler.development.js:2495
    commitRoot react-reconciler.development.js:15551
    performSyncWorkOnRoot react-reconciler.development.js:14857
    performSyncWorkOnRoot self-hosted:1222
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157

So my questions are: How can I resolve this issue? Perhaps I should be passing the animation I want to be played a different way? Thanks in advance!

[CodyJasonBennett]

This is related to #1569.

args must be an array of arguments, so you'd declare a Color with <color attach="background" args={["lightblue"]} />:

• https://codesandbox.io/s/gn4s0

[RealSnowKid]

Wow cheers. Kind of weird that it does not blow up on first render, only during the re-renders.

[CodyJasonBennett]

I think this is something for us to improve for sure.

[drcmda]

https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/core/renderer.ts#L297-L304 this whole block is useless. it should just crash, not even try to discern between array and no array. i think i wanted it to accept arrays or single objects in the beginning but only figured out later that that's technically impossible due to the ambiguity between:

const array = [1,2,3]
<foo args={array} />

and

<foo args={[array]} />

given that foos contructor actually wants a real array passed as the first argument. but in both cases it would spread. that code in createInstance has to be removed.

[drcmda]

fixed it, can go live in some upcoming patch