Initialize Yoga before CanvasEngine components use Pixi layout

[RSamaium]

Problem

When running the RPGJS starter with Vite, after fixing the PixiJS CommonJS/ESM issues, the app reaches CanvasEngine initialization and then crashes with:

TypeError: Cannot read properties of undefined (reading 'Node')

The stack points to @pixi/layout creating a layout node:

@pixi/layout/dist/core/Layout.mjs:101
getYoga().Node.create(...)

In CanvasEngine, components can assign this.layout = {} during component creation. At that point, @pixi/layout has been imported, but Yoga has not necessarily been initialized yet, so getYoga() is still undefined.

Reproduction context

This was reproduced through rpgjs/starter after applying the temporary Vite workaround for PixiJS CommonJS dependencies:

optimizeDeps: {
  include: ['parse-svg-path', '@xmldom/xmldom']
}

That removes the previous PixiJS import errors, then this CanvasEngine layout error appears.

Proposed fix

CanvasEngine should explicitly initialize Yoga inside bootstrapCanvas() before any CanvasEngine component can set layout.

In src/engine/bootstrap.ts, the existing layout import:

if (enableLayout !== false) {
  await import('@pixi/layout');
}

could become something like:

if (enableLayout !== false) {
  const [{ getYoga, getYogaConfig, setYoga, setYogaConfig }, { loadYoga }] = await Promise.all([
    import('@pixi/layout'),
    import('yoga-layout/load')
  ]);

  if (!getYoga()) {
    setYoga(await loadYoga());
  }

  if (!getYogaConfig()) {
    setYogaConfig(getYoga().Config.create());
  }
}

Why here

bootstrapCanvas() is the point where CanvasEngine opts into layout support before creating/rendering components. Since CanvasEngine components use layout synchronously during initialization, CanvasEngine should guarantee that Yoga is ready there instead of relying on Pixi's Application.init() layout system timing.

Notes

I also tested these alternatives:

• adding @pixi/layout and yoga-layout/load to Vite optimizeDeps: did not fix the issue
• disabling layout with bootstrapCanvasOptions.enableLayout = false: avoids the Yoga error but leads to later rendering issues, so it is not a valid fix for RPGJS starter