Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

<Anim> Component not working as described

Open
  • Is something wrong?
#267 3 comments 1 reaction 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start at validation.ts:229 and use-component.tsx:56, following how the Anim component applies its props. Compare the declared AnimProps with the documented clip and loop examples, then verify that both documented usage forms no longer produce the TypeScript errors or the getter-only property error.

Written by the indexing model from the issue text.

Description

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… 🫶

Dominant language
TypeScript
Stars
538
Forks
60
Avg merge
12h 28m
Merged PRs (30d)
10

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from playcanvas/react

All issues in playcanvas/react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.