Strange behavior when using PixiJS 8 within a Vue.js component

[2nOrderEDO]

Hello fellow forum users,

I'm facing some problems when trying to load pixi within a vue component.

In order for pixi to be available within the component, I declare new PIXI.Application() within the data() segment of Vue. This works fine and I can even load a texture and display it within the appropriate HTML element I reserved for the canvas. In other words, I can replicate pixi.js tutorial 1 within a vue component without problems.

The problem I'm facing is when I try to add a plain, no fancy Text element. Then, I get an error saying that: "CanvasRenderingContext2D.createPattern: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, OffscreenCanvas, ImageBitmap, VideoFrame."

This is in Firefox, in Brave I get: "Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'."

I will leave here my code for the Vue component for your reference:

<template>
  <div ref="stage"></div>
</template>

<script>
  import * as PIXI from 'pixi.js';

  export default {
    data() {
      return {
        app: new PIXI.Application(), 
      };
    },
    mounted() {
      
      (async () => {
        
        await this.app.init({
          background: '#FFFFFF', // Background color, EP black
          resizeTo: HTMLElement,
          width: 1280,
          height: 720,
          antialias: true, // So that lines do not look crappy
          autoDensity: true // What does this do?
        }); 

        this.$refs.stage.appendChild(this.app.canvas);

        const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');
        const bunny = new PIXI.Sprite(texture);
        this.app.stage.addChild(bunny);

        bunny.x = this.app.screen.width / 2;
        bunny.y = this.app.screen.height / 2;

        const basicText = new PIXI.Text({ text: 'Hello World'});

        basicText.x = this.app.screen.width / 2;
        basicText.y = this.app.screen.height / 2; 

        this.app.stage.addChild(basicText);

      })();
    },
};
</script>

<style>
</style>

If you remove the line where basicText is added to the stage, you get no error. I'm using the latest version of pixi (8.1).

Thanks for your time reading my post and for providing any tips 🙂

BR,

2nOrderEDO