PIXIJS eventSystem 在 V6.0.2 中找不到

Question

I am building a demo in PIXIJS v6.0.2. I am trying to add on click event listeners to some buttons. But that doesn't work, so I went into the documentation and found this snipped of code in their example of a click event.

// In this a example, you can click on a bunny and the more you click at
// a time the bigger it becomes. If you click outside of the bunny or
// lose your clicking speed, the bunny resets.

// Disable interaction plugin (for PixiJS 6)
// eslint-disable-next-line no-underscore-dangle
delete PIXI.Renderer.__plugins.interaction;

// Create app
const app = new PIXI.Application({
    antialias: true,
    autoDensity: true,
    backgroundColor: 0x1099bb,
    resolution: devicePixelRatio,
});
document.body.appendChild(app.view);

// Install EventSystem, if not already
// (PixiJS 6 doesn't add it by default)
if (!('events' in app.renderer)) {
    app.renderer.addSystem(PIXI.EventSystem, 'events');

But I get this error Uncaught TypeError: ClassRef is not a constructor at Renderer.addSystem (core.js:10214) at Module../src/app.js (app.js:22) at __webpack_require__ (bootstrap:19) at main.js:54738 at main.js:54754 at main.js:54941

I am importing PIXIJS into my file I am doing a webpack/babel build. I'm not sure what I'm missing or doing wrong but I cannot seem to find any answers to this for PIXI 6. I don't even get a response on the PIXI Gitter. Any help is appreciated thank you!

Answer 1

The events system is only available in 6.1.0+. Currently there is a prerelease 6.1.0-rc.2 you can use.

Answer 2

For some reason EventSystem is not being exported from pixi.js I found a workaround by installing @pixi/events separately and import the Event System from there.

// In this a example, you can click on a bunny and the more you click at
// a time the bigger it becomes. If you click outside of the bunny or
// lose your clicking speed, the bunny resets.

import * as PIXI from 'pixi.js';
import { EventSystem } from '@pixi/events';
PIXI.EventSystem = EventSystem;

// Disable interaction plugin (for PixiJS 6)
// eslint-disable-next-line no-underscore-dangle
delete PIXI.Renderer.__plugins.interaction;

// Create app
const app = new PIXI.Application({
    antialias: true,
    autoDensity: true,
    backgroundColor: 0x1099bb,
    resolution: devicePixelRatio,
});
document.body.appendChild(app.view);

// Install EventSystem, if not already
// (PixiJS 6 doesn't add it by default)
if (!('events' in app.renderer)) {
    app.renderer.addSystem(PIXI.EventSystem, 'events');

...

References: pixi events