Bug: Can't await Application.init from top level if bundled using vite

[Nearoo]

I don't know if the issue is present with other bundlers.

Current Behavior

If you do

const app = new Application();
await app.init({
  background: '0x1099bb',
});

on the top level, the init async promise will never resolve, stalling the remainder of the app.

Note that that if you not await, then the promise resolves as expected. So a current workaround is wrapping all code in an async IIFE. Also, if the app isn't bundled, the issue isn't there either.

Expected Behavior

await app.init to resolve and execution to continue.

Steps to Reproduce

here's a stackblitz showing the behaviour.

If you do npm run build && npm run preview, the log statement won't show.

Environment

• pixi.js version: 8.0.0-rc.9
• Browser & Version: Google Chrome
• OS & Version: Ubuntu 22.04, Mac OS
• Running Example: https://stackblitz.com/edit/vitejs-vite-mbxdgn

Possible Solution

No response

Additional Information

No response

[lunarraid]

Adding to this, it seems that this only occurs if the PixiJS libs are bundled into the same module file as the app code using the top level await. When this happens, the promise will hang indefinitely. If they are chunked separately, this issue does not occur. I'm sure there is some arcane top level await logic that isn't playing nicely here.

[nightgrey]

Adding to this, it seems that this only occurs if the PixiJS libs are bundled into the same module file as the app code using the top level await. When this happens, the promise will hang indefinitely. If they are chunked separately, this issue does not occur. I'm sure there is some arcane top level await logic that isn't playing nicely here.

I've had a related / similar issue.

When I created a new Application instance in module-a, but initialized it in module-b, it never resolved, either.

I had to construct and init in the same module - which I incidentally did in it's own function, so I might have missed the top level await bug by chance.

But it sounds similar. Just adding this for more info.

[ASoldo]

I have the same issue. When working with Pixijs 7 i had no issue, now i started the new project with pixi8 and this colored function is now giving me issues when working with vite. How do I resolve this?

import * as PIXI from "pixi.js";
import { Engine, Render, Runner } from "matter-js";

export const app = new PIXI.Application();
await app.init({
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1,
  autoDensity: true,
  backgroundAlpha: 1,
  resizeTo: window,
});

(globalThis as any).__PIXI_APP__ = app;
// (globalThis as any).__PIXI_STAGE__ = stage;
// (globalThis as any).__PIXI_RENDERER__ = renderer;

export const engine = Engine.create();
export const runner = Runner.create();

export const matterRender = Render.create({
  element: document.getElementById("matter-debug-container") as HTMLElement,
  engine: engine,
  options: {
    width: app.screen.width,
    height: app.screen.height,
    wireframes: true,
    background: "transparent",
  },
});

[lunarraid]

Easiest answer is to wrap the entire init in a function instead of using top-level await for now.

(async () => {
  await app.init({
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
    backgroundAlpha: 1,
    resizeTo: window,
  });
})();

[ASoldo]

It's not working for me when I do it like this and I get the following error in the console and app breaks:

import * as PIXI from "pixi.js";
import { Engine, Render, Runner } from "matter-js";

export const app = new PIXI.Application();
(async () => {
  await app.init({
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
    backgroundAlpha: 1,
    resizeTo: window,
  });
})();

(globalThis as any).__PIXI_APP__ = app;
// (globalThis as any).__PIXI_STAGE__ = stage;
// (globalThis as any).__PIXI_RENDERER__ = renderer;

export const engine = Engine.create();
export const runner = Runner.create();

export const matterRender = Render.create({
  element: document.getElementById("matter-debug-container") as HTMLElement,
  engine: engine,
  options: {
    width: app.screen.width,
    height: app.screen.height,
    wireframes: true,
    background: "transparent",
  },
});

chunk-76JMR5L7.js?v=c7ded604:6060 Uncaught TypeError: Cannot read properties of undefined (reading 'screen')
    at get screen (chunk-76JMR5L7.js?v=c7ded604:6060:26)
    at app.ts:26:16

[lunarraid]

That's because you're trying to use the application before it has initialized. Move the rest into the function after the await if you need to use the application.

[ASoldo]

I was able to do it but I had to refactor few files (move code from there to main.ts) and use them here:

import "./style.css";
import * as PIXI from "pixi.js";
import { Engine, Render, Runner } from "matter-js";
import { game_scene1 } from "./scenes/game_scene1";
export const engine = Engine.create();
export const matterRender = Render.create({
  element: document.getElementById("matter-debug-container") as HTMLElement,
  engine: engine,
  options: {
    width: window.innerWidth,
    height: window.innerHeight,
    wireframes: true,
    background: "transparent",
  },
});
export const runner = Runner.create();
export const app = new PIXI.Application();
(async () => {
  await app.init({
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
    backgroundAlpha: 1,
    resizeTo: window,
  });
  document
    .getElementById("pixi-container")
    ?.appendChild(app.canvas as HTMLCanvasElement);
  const gameScene = new game_scene1(engine, matterRender);
  Render.run(matterRender);
  Runner.run(runner, engine);
  if (matterRender.canvas) {
    matterRender.canvas.style.background = "transparent";
  }

  app.ticker.add((delta: PIXI.Ticker) => gameScene.update(delta.deltaTime));
  app.start();
  (globalThis as any).__PIXI_APP__ = app;
  // (globalThis as any).__PIXI_STAGE__ = stage;
  // (globalThis as any).__PIXI_RENDERER__ = renderer;
})();

now I am able to run and build with pnpm dev | pnpm build

[bigtimebuddy]

I'm going to close this issue. This is a Vite usage and limitation more than a Pixi problem. Try searching for solutions such as setting the build target to esnext or using a plugin like https://www.npmjs.com/package/vite-plugin-top-level-await.

For other questions or support, please consider creating a discussion instead of an issue.