Proper way to create PixiComponent in typescript

[spassvogel]

Description

Hi, ever since upgrading pixi.js to 6.2.0 typescript complains

Type 'Graphics' does not satisfy the constraint 'DisplayObject'. Type 'Graphics' is missing the following properties from type 'DisplayObject': sortDirty, parent, worldAlpha, transform, and 82 more.ts(2344) class Graphics interface Graphics The Graphics class is primarily used to render primitive shapes such as lines, circles and rectangles to the display, and to color and fill them. However, you can also use a Graphics object to build a list of primitives to use as a mask, or as a complex hitArea.

Please note that due to legacy naming conventions, the behavior of some functions in this class can be confusing. Each call to drawRect(), drawPolygon(), etc. actually stores that primitive in the Geometry class's GraphicsGeometry object for later use in rendering or hit testing - the functions do not directly draw anything to the screen. Similarly, the clear() function doesn't change the screen, it simply resets the list of primitives, which can be useful if you want to rebuild the contents of an existing Graphics object.

Once a GraphicsGeometry list is built, you can re-use it in other Geometry objects as an optimization, by passing it into a new Geometry object's constructor. Because of this ability, it's important to call destroy() on Geometry objects once you are done with them, to properly dereference each GraphicsGeometry and prevent memory leaks.

@class

@extends PIXI.Container

@memberof — PIXI

This is my code (simplified)

import { PixiComponent, Graphics } from "@inlet/react-pixi";
import * as PIXI from "pixi.js";

const DashedLine = PixiComponent<React.ComponentProps<typeof Graphics>, PIXI.Graphics>("DashedLine", {
  create: () => new PIXI.Graphics(),
});

am I doing something wrong?

Versions:

    "@inlet/react-pixi": "^6.6.5",
    "pixi.js": "^6.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",

[inlet]

🤔 I cannot reproduce this issue, can you perhaps share your tsconfig.json?

Can you also try to add the types for react and react-dom?

npm install @types/{react,react-dom}

[spassvogel]

Okay this is extremely weird but after rm -rf node_modules && rm packacke-lock.json and installing dependencies again it works. So sorry

[inlet]

No worries, glad it works