Can't override destroy method of a sprite (maybe because of Webpack)

[Yurii Bilas]

Hi!
I'm new to this forum. I've searched a lot, but couldn't find a way to fix my issue.
What I'm trying to do is to override destroy method of the Sprite class.
Here's a code, that I use (TypeScript):

const destroySprite = Sprite.prototype.destroy;
console.log(PIXI.Sprite.prototype, PIXI.Sprite, Sprite.prototype, Sprite, PIXI);
Sprite.prototype.destroy = function (options: any) {
  // doing some extra logic
  destroySprite.call(this, options);
};

But when I debug the application - I see that I can only step into this overridden method from the derived objects (like Text, TilingSprite etc.).
Pixi's version in the package.json is:

"pixi.js": "^5.3.8",

Also I use webpack 5 for modules bundling. I have some suspicion that it may be the source of problems.
And there's a result console.log, that I've added to the code snippet above:

I would be very thankful if someone could give me an advise on how that issue can be fixed.
Thanks in advance.

[ivan.popelyshev]

It should work

[Yurii Bilas]

7 minutes ago, ivan.popelyshev said:

It should work

Hi! Yep, it should, but still it doesn't for some reason. When I call destroy of some container - it calls destroy for all it's children, but when it meets Sprite object - it calls original Pixi's destroy method. But when it meets some derived class like Text - it calls the one, that I've provided.

[ivan.popelyshev]

Do you use any plugins?

[Yurii Bilas]

27 minutes ago, ivan.popelyshev said:

Do you use any plugins?

I use such PIXI plugins:
pixi-filters
pixi-particles
pixi-spine
pixi-fps
@pixi/filter-color-overlay
And such Webpack plugins:
copy-webpack-plugin
html-webpack-plugin
tsconfig-paths-webpack-plugin
webpack-visualizer-plugin2
json-minimizer-webpack-plugin
ProvidePlugin
DefinePlugin
TerserPlugin
webpack-closure-compiler

[ivan.popelyshev]

Most probably there are two pixies somewhere, and you ar overriding class of the pixi that isnt actually used in the project. Are hooks for Sprite and Container in different files?

[Yurii Bilas]

18 minutes ago, ivan.popelyshev said:

Most probably there are two pixies somewhere, and you ar overriding class of the pixi that isnt actually used in the project. Are hooks for Sprite and Container in different files?

Just checked the big resulting .js bundle that is being emitted by webpack - it indeed contains two definitions of PIXI. Thanks for that valuable clue! I'll try now to find a reason for this behavior. I'll leave a message here once I'm done.

[ivan.popelyshev]

rm package lock and node_modules

npm i

if its not gone, find which plugin adds second pixi. Probably pixi-spine if you took it version for pixi-6 (should work as UMD though...)

[Yurii Bilas]

Fixed that issue. It's true, that there was a second pixi. But the source of it wasn't because of some plugin. I use yarn link to create a symlink to a custom game engine, that I'm modifying at the same time when I modify the application itself. And for some specific reason I installed node_modules for that symlinked version of an engine. It downloaded it's own copy of pixi. Turned out, that it's a common issue with yarn link & probably with npm link, too. I fixed this for me by temporarily moving that piece of functionality to an application & removing node_modules from engine. When PR to the engine gets approved - it will then work nice without that hack. Thanks for your help!