Error: HtmlText is not part of the PIXI namespace! Did you forget to extend? (already extended)

[bin16]

extend HTMLText

import { extend } from "@pixi/react";
import {
  Container,
  Text,
  Sprite,
  HTMLText,
} from "pixi.js";

extend({
  Container,
  Sprite,
  Text,
  HTMLText,
});

tsx

<pixiContainer>
  <pixiText text={"pixiText looks good"} />
  <pixiHtmlText text={"but pixiHtmlText not work"} />
</pixiContainer>

error info

Error: HtmlText is not part of the PIXI namespace! Did you forget to extend?
    createInstance createInstance.ts:27
    completeWork react-reconciler.development.js:8867
    runWithFiberInDEV react-reconciler.development.js:522
    completeUnitOfWork react-reconciler.development.js:12776
    performUnitOfWork react-reconciler.development.js:12658
    workLoopSync react-reconciler.development.js:12461
    renderRootSync react-reconciler.development.js:12441
    performWorkOnRoot react-reconciler.development.js:11960
    performSyncWorkOnRoot react-reconciler.development.js:2152
    flushSyncWorkAcrossRoots_impl react-reconciler.development.js:2013
    flushSyncWork react-reconciler.development.js:12216
    scheduleRoot react-reconciler.development.js:78
    performReactRefresh @react-refresh:142
    performReactRefresh @react-refresh:125
    enqueueUpdate @react-refresh:392
    setTimeout handler*debounce/< @react-refresh:383
    validateRefreshBoundaryAndEnqueueUpdate @react-refresh:422
    <anonymous> Box.tsx:131
    accept client:34
    fetchUpdate client:213
    queueUpdate client:186
    queueUpdate client:186
    handleMessage client:930
    handleMessage client:928
    createHMRHandler client:490
    dequeue client:516
    enqueue client:504
    enqueue client:498
    createHMRHandler client:490
    onMessage client:309
    connect client:439
    connect client:438
    connect client:811
    connect client:290
    connect client:383
    <anonymous> client:908
 
Object { componentStack: "\npixiHtmlText@unknown:0:0\npixiContainer@unknown:0:0\nBox@http://localhost:5174/src/components/Box.tsx?t=1745367204257:27:43\nFiberProvider@http://localhost:5174/node_modules/.vite/deps/@pixi_react.js?v=e659e7ec:101:21" }

Did I miss anything?

[trezy]

Yup, this is definitely a bug. In fact, I'd wager it's an issue with every component that gets adjusted via NameOverrides. I was able to reproduce the issue with HTMLText, though.

If you use the component as <pixiHTMLText /> instead then it will throw a Typescript error, but it will work. Suggested workaround until I can diagnose and fix the issue:

/**
 * Using UnprefixedPixiElements because the component name is correct there so
 * we can avoid type issues.
 */
import { type UnprefixedPixiElements } from '@pixi/react'

export const myHTMLText = (props: UnprefixedPixiElements['htmlText']) => (
  // @ts-expect-error There's an issue with components that have name overrides;
  // see https://github.com/pixijs/pixi-react/issues/603
  <pixiHTMLText {...props} />
)

[thejustinwalsh]

@trezy I don't think I ever evaluated those types in my initial testing... Likely need to use the same trick we use for constructor overrides to get the types to infer correctly...

[macrozone]

same happens with pixiGraphics

edit: i mised the part that you have to wrap with extend:

import { Application, extend } from "@pixi/react";
import { Graphics, Container, Sprite } from "pixi.js";

extend({
  Container,
  Graphics,
  Sprite,
});

[neove]

use<pixiHTMLText>. not <pixiHtmlText

[neove]

or

[james-kaguru]

pixiHTMLText

This works but I get a typescript error saying pixiHTMLText type doesn't exist.