[ts][pixi-v8] does not seem to work when used inside a react lazy component

[BlackRam-oss]

I've been using pixi.js v8 for game development for a while now and I wanted to start using spine-pixi-v8. My game uses pixi.js for rendering while react for the interface, but spine-pixi-v8 does not seem to work when used inside a react environment.

Basically if I try to add a spine element from an event of a lazy react element it gives me the following error:

Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'validateRenderable')
    at validateRenderables (/home/user/template/spine-test/node_modules/pixi.js/src/scene/container/utils/validateRenderables.ts:27:32)
    at _updateRenderGroups (/home/user/template/spine-test/node_modules/pixi.js/src/scene/container/RenderGroupSystem.ts:183:13)
    at render (/home/user/template/spine-test/node_modules/pixi.js/src/scene/container/RenderGroupSystem.ts:71:14)
    at emit (/home/user/template/spine-test/node_modules/pixi.js/src/rendering/renderers/shared/system/SystemRunner.ts:71:26)
    at render (/home/user/template/spine-test/node_modules/pixi.js/src/rendering/renderers/shared/system/AbstractRenderer.ts:365:29)
    at render (/home/user/template/spine-test/node_modules/pixi.js/src/app/Application.ts:291:23)
    at emit (/home/user/template/spine-test/node_modules/pixi.js/src/ticker/TickerListener.ts:64:26)
    at update (/home/user/template/spine-test/node_modules/pixi.js/src/ticker/Ticker.ts:702:37)
    at _tick (/home/user/template/spine-test/node_modules/pixi.js/src/ticker/Ticker.ts:280:22)

https://codesandbox.io/p/sandbox/y6y6mp

[davidetan]

Hello and thanks for the repro.

I'll give it a look as soon as I can :)

[davidetan]

This is not a bug.

You need to import the Spine runtime where you initialize your app, otherwise the extensions might not be initialized correctly.

In your index.tsx, import spine-pixi-v8 right after your PixiJS Application import:

import { Application } from "pixi.js";
import "@esotericsoftware/spine-pixi-v8";

This has the side effect of registering the required extension before app.init is invoked.