Multiple canvases being rendered in my Pixi app

[seanytdawg]

I have a strange issue with my canvas elements.

I had been developing a Pixi.js project in isolation, then decided to embed it in my React app. 

I have been able to place the Pixi project within a component and have it compile and build along with the React app from the jump, but when I visit the PIxi game, instead of one canvas being rendered, immediately 2 canvases render. And then if I update the code with this browser open, multiple canvases keep getting added to the dom.

Note: this only happens when I run an 'unoptimized' `npm start`. When I do `serve build`, then only one canvas is rendered-but this build does not allow for me to hot-reload so I cannot develop my app like that. I at least need a build that will allow me to see my progress in real time and not make me restart my server every time.

Any ideas?

[ivan.popelyshev]

dont forget destroy app in some.. event i think. There should be event in hot-reload environments. For example, in codesandbox i have  to write something like "

module.hot.dispose(() => {

app.destroy();

});

I dont know what to write for react

[seanytdawg]

@ivan.popelyshevthank you! yeah I passed these functions from App.js down to their children, and invoke when the games are being rendered: 

 

However, even though I am still checking to see if the root exists, I still get console errors saying I'm trying to remove an element that isn't present:

This isn't breaking my app-but would love to do away with console errors if I can.

It's like I'm stuck between a rock and a hard place: I can get rid of the root removal which would give me a clear console, yet multiple canvases

Edited November 18, 2022 by seanytdawg