<Anim> Component not working as described
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 528
- Forks
- 60
- Avg merge
- 1m
- Merged PRs (30d)
- 1
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… 🫶
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
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.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100