Second initialization of PlayCanvas fails

Help & Support
1

Hello, Friends,

I have my game in web component. On first initialization everything works. After I use this code to destroy PlayCanvas in component:

  disconnectedCallback(): void {
    window.removeEventListener('destroy-game', this.onDestroyHandler.bind(this));
    window.removeEventListener('game-resize', pcResizeHandler);
    window.removeEventListener('resize', this.onResizeHandler);

    this.isCanvasEnabled = false;

    if (!this.playCanvas) return;
    this.playCanvas.destroy();
    this.playCanvas = null;
    clearApp();
    console.log('destroy-game square');
  }

  render() {
    return (
      <Host>
        {this.isCanvasEnabled && (
          <canvas class="game-canvas" style={{ zIndex: '5' }} ref={el => (this.canvas = el as HTMLCanvasElement)}></canvas>
        )}
      </Host>
    );
  }

After I one more time create component (index.html):

function createOrShowGame(gameId) {
  const gameContainer = document.querySelector('.game-container');

  if (currentGame) {
    currentGame.parentNode.removeChild(currentGame);
    console.log('chield removed');
  }

  let game = document.getElementById(gameId);
  game = document.createElement(gameId);
  game.id = gameId;
  game.className = 'game';
  game.style.width = '100%';
  game.style.height = '100%';
  game.style.display = 'block';
  gameContainer.appendChild(game);
  currentGame = game;

And I see in console:

device type webgpu
playcanvas.mjs:12485 TypeError: module.default is not a function
at playcanvas.mjs:8352:226
at async Promise.all (:3333/index 1)
at async WebgpuGraphicsDevice.initWebGpu (playcanvas.mjs:8352:19)
destroy-game square
chield removed
device type webgpu
playcanvas.mjs:12485 TypeError: module.default is not a function
at playcanvas.mjs:8352:226
at async Promise.all (:3333/index 1)
at async WebgpuGraphicsDevice.initWebGpu (playcanvas.mjs:8352:19)
WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
WebGL: INVALID_OPERATION: drawElements: no valid shader program in use
…
154 WebGL errors.

Any ideas on how to fix this?

2

I’m not sure what problem you’re hitting. But here’s an example that creates and destroys the app that you might inspect: PlayCanvas Examples