manager.on is not a function

[ABallard98]

When trying to add the model to the PIXI stage I get an error of "TypeError: manager.on is not a function"

index.html :

...
  <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.0.3/pixi.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
...

App.tsx :

const modelUrl =
  "./hiyori_free_en/runtime/hiyori_free_t08.model3.json"

const App = () => {
  Live2DModel.registerTicker(PIXI.Ticker);
  const app = new PIXI.Application<HTMLCanvasElement>({
    autoStart: true,
    backgroundAlpha: 0,
    resizeTo: window
  })

  useEffect(() => {
    document.body.appendChild(app.view);
    void (async () => {
      const model = await Live2DModel.from(modelUrl)
      model.position.set(500, 500)
      app.stage.addChild(model) // error: manager.on is not a function
      model.scale.set(0.1);
      model.anchor.set(0.5, 0.5);
      model.y = window.screen.height * 0.1;
    })()
  }, [app, modelUrl])

  return (
    <div>
        <h4>Live2d example</h4>
    </div>
  );
}

[ABallard98]

I was able to solve by downgrading to pixi.js@6.5.2 and replacing the pixi app initialisation with

    const app = new PIXI.Application({
      autoStart: true,
      backgroundAlpha: 0,
      resizeTo: window,
      view: document.getElementById('canvas') as HTMLCanvasElement
    })

[Cpk0521]

Since pixi v7 @pixi/interaction changed to @pixi/events If you want to run on pixi v7 You may need to modify the Live2DModel.ts and InteractionMixin.ts files

Live2DModel.ts

override _render(renderer: Renderer): void {
        // this.registerInteraction(renderer.plugins.interaction);
        this.registerInteraction(renderer.events)
        ...
}

InteractionMixin.ts

// import { InteractionEvent, InteractionManager } from '@pixi/interaction';
import { FederatedPointerEvent, EventSystem } from '@pixi/events';

export class InteractionMixin {
    ...

    //interactionManager?: InteractionManager;
    interactionManager?: EventSystem;

    //registerInteraction(this: Live2DModel<any>, manager?: InteractionManager): void {
    registerInteraction(this: Live2DModel<any>, manager?: EventSystem): void {
        if (manager !== this.interactionManager) {
            this.unregisterInteraction();

            if (this._autoInteract && manager) {
                this.interactionManager = manager;
                // manager.on('pointermove', onPointerMove, this);
                manager.domElement.addEventListener('pointermove', onPointerMove.bind(this))
            }
        }
    }

    unregisterInteraction(this: Live2DModel<any>): void {
        if (this.interactionManager) {
            // this.interactionManager?.off('pointermove', onPointerMove, this);
            this.interactionManager?.domElement.removeEventListener("pointermove", onPointerMove.bind(this));
            this.interactionManager = undefined;
        }
    }
}

//function onTap(this: Live2DModel<any>, event: InteractionEvent): void {
function onTap(this: Live2DModel<any>, event: FederatedPointerEvent): void {
    this.tap(event.data.global.x, event.data.global.y);
}

//function onTap(this: Live2DModel<any>, event: InteractionEvent): void {
function onPointerMove(this: Live2DModel<any>, event: PointerEvent) {
    // this.focus(event.data.global.x, event.data.global.y);
    this.focus(event.x, event.y);
}