<Anim> Component not working as described

[djfarly]

Hej :)

I was playing around loading a glb file and playing an animation but I could not get the component to work.

There are two examples found throughout the docs. One where Anim is a child of the entity, one where it is a child of render.

    return (<Entity {...props}>
        <Render type="asset" asset={asset} />
        <Anim asset={asset} clip="Walk" loop />
    </Entity>)

https://playcanvas-react.vercel.app/docs/api/components/anim

    {/* render the asset */}
    <Render type='asset' asset={asset} >
        <Anim asset={asset} />
    </Render>

https://github.com/playcanvas/react/blob/main/packages/docs/content/examples/load-a-3D-model.mdx

---

Here is what I can observe:

Typescript is not happy with the clip or loop props

Type '{ asset: Asset; clip: string; loop: true; }' is not assignable to type 'IntrinsicAttributes & AnimProps'.
  Property 'clip' does not exist on type 'IntrinsicAttributes & AnimProps'.ts(2322)
…
  Property 'loop' does not exist on type 'IntrinsicAttributes & AnimProps'.ts(2322)

Using it (no matter which way, even ts-expect-ing the errors), I get this error in the browser:

An error occurred in the <Anim> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
react-dom-client.development.js:8283:15

Uncaught TypeError: setting getter-only property "playable"
    applyProps validation.ts:229
    applyProps validation.ts:221
    useComponent use-component.tsx:56
    React 60
    performWorkUntilDeadline scheduler.development.js:45
    js scheduler.development.js:223
    js scheduler.development.js:364
    __require chunk-G3PMV62Z.js:8
    js index.js:6
    __require chunk-G3PMV62Z.js:8
    React 2
    __require chunk-G3PMV62Z.js:8
    js React
    __require chunk-G3PMV62Z.js:8
    <anonymous> react-dom_client.js:18083
validation.ts:229:22

Help is greatly appreciated… 🫶

[marklundin]

Thanks for the report @djfarly! Looking into this now.

[marklundin]

Just a heads up - I'm introducing a new API for managing GLB's and animations which will fix this #282