Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: PixiComponent type issue with Text #459

Open
coolbeatz71 opened this issue Sep 28, 2023 · 1 comment
Open

Bug: PixiComponent type issue with Text #459

coolbeatz71 opened this issue Sep 28, 2023 · 1 comment
Labels
bug Something isn't working v7 Issues related to Pixi React v7

Comments

@coolbeatz71
Copy link

coolbeatz71 commented Sep 28, 2023

Current Behavior

Current Behavior
Type error when using PixiComponent with Text in typescript after upgrading the package version to below:

@pixi/react version: 7.1.1
pixi.js version: 7.3.1
@pixi/text version: 7.3.1

import { Text } from "@pixi/react";
.
.
.

const style = new PIXI.TextStyle({});
const dragDropText = "Drag & drop a 3D model and resources to load it...";

<Text
  text={dragDropText}
  x={window.innerWidth / 2 - textMetrics.width / 2}
  y={window.innerHeight / 2 - textMetrics.height / 2}
  style={style}
  visible={!meshesLoaded}
/>
Type '{ text: string; x: number; y: number; style: TextStyle; visible: boolean; }' is not assignable to type 'IntrinsicAttributes & Partial<Omit<PixiText, any> & WithPointLike<P>> & WithSource & InteractionEvents & { ...; }'.
  Property 'text' does not exist on type 'IntrinsicAttributes & Partial<Omit<PixiText, any> & WithPointLike<P>> & WithSource & InteractionEvents & { ...; }'.ts(2322)

Expected Behavior

The Text component should render with no typescript errors, I actually followed the documentation example.

Steps to Reproduce

You can find a codesanbox here: https://codesandbox.io/s/magical-jang-wp3dtv?file=/src/App.tsx

  1. Install the package version in a typescript react project

    • @pixi/react version: 7.1.1
    • pixi.js version: 7.3.1
    • @pixi/text version: 7.3.1
  2. Create a small react & typescript component:

import { Stage, Container, Text } from '@pixi/react';

const MyComponent = () => {
 const style = new PIXI.TextStyle({});
 
 return (
    <Stage>
      <Container>
        <Text text="Hello World" x={400} y={330} style={style} />
      </Container>
   </Stage>
  );
};

Environment

  • @pixi/react version: 7.1.1
  • pixi.js version: 7.3.1
  • @pixi/text version: 7.3.1
  • ReactDOM version: 18.2.0
  • react version: 18.2.0
  • typescript version: 4.5.5

Possible Solution

Remove text, style, etc from the omitted properties Partial<Omit<PixiText, any>

Additional Information

No response

@coolbeatz71 coolbeatz71 changed the title Bug: Bug: PixiComponent type issue with Text Sep 28, 2023
@trezy trezy added v7 Issues related to Pixi React v7 bug Something isn't working labels Jun 15, 2024
@sibstark
Copy link

sibstark commented Jul 2, 2024

Same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working v7 Issues related to Pixi React v7
Projects
None yet
Development

No branches or pull requests

3 participants