pixijs / pixi-react

Write PIXI apps using React declarative style
https://pixijs.io/pixi-react/
MIT License
2.26k stars 173 forks source link

Erro with Container component type #350

Closed Firas88Alkhatib closed 1 year ago

Firas88Alkhatib commented 1 year ago

Description

Error with "Container" component type, the children prop is omitted

Steps to reproduce

1.Create React functional component

  1. returns Container component with Graphics component as children `

    `

Additional info

james-arn commented 1 year ago

I've experienced this too, you can turn off typescript using @ts-ignore and it somewhat works for some props like position, however height and width doesn't. I've had to revert to pixi.js.

nanachi-code commented 1 year ago

I dived into the type def and looks like the they are omitting the children props. Not sure if this is intentional.

type Container<T extends PIXI.DisplayObject, U = {}> = Partial<
    Omit<T, 'children' | P | ReadonlyKeys<T> | keyof U> &
    WithPointLike<P>
    > & U & InteractionEvents & { ref?: React.Ref<T> };

 type IContainer = Container<PIXI.Container>;

 export const Container: React.FC<_ReactPixi.IContainer>;

Edit: https://github.com/inlet/react-pixi/pull/338#discussion_r942023521 looks like it is a React18 problem and will be fixed in the next version

saitonakamura commented 1 year ago

@Firas88Alkhatib can you provide a repro (you can use this codesandbox as a template, but pay attention to the versions https://codesandbox.io/s/angry-wave-1ly78t?file=/src/App.tsx)? I'm struggling to understand the issue. As for the react 18 they did remove childern prop from FC and Component, but none of the topic starter version suggests it's react 18 issue

nanachi-code commented 1 year ago

mb I wasnt paying attention to op's react version but I was also facing the same problem when using react 17. I think its because the Container component doesnt have the children prop from the type def I found in the previous comment.

saitonakamura commented 1 year ago

@nanachi-code this is done intentionally so the pixi children class field (which is omitted) won't clash with react concept of children (which effectively replaces pixi one). If you have repro we can investigate, but otherwise I don't really understand what may cause it

shryt commented 1 year ago

I also faced the same issue, and it should be because I forgot to downgrade @types/reactand @types/react-dom. It might solve to downgrade those to version 17 manually, or I recommend you to use typesync(https://github.com/jeffijoe/typesync), which automatically install missing TypeScript typings for dependencies.

sebastian-budka-mir commented 1 year ago

It was working fine on React 17. But after migration to 18 it stoped working due to children props removal in React.FC (as @saitonakamura mentioned).

QuentinMenDev commented 1 year ago

It seems that this error hasn't been corrected in v7.0.0. There was a change made in #338 that was correcting it but it didn't go through. As @sebastian-budka-mir stated and ryohey explained in the Draft, changing React.FC<_ReactPixi.IContainer> into React.FC<React.PropsWithChildren<_ReactPixi.IContainer>> do the trick.

baseten commented 1 year ago

Released in v7.0.1