Bug: Uncaught TypeError: Cannot read properties of undefined (reading 'canvas') about pixijs

[SuperSodaSea]

Can you provide code to reproduce your problem?

[gonulbuya]

const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });

document.body.appendChild(app.view);

// create a new Sprite from an image path
const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add((delta) =>
{
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent transformation
    bunny.rotation += 0.1 * delta;
});

It works smoothly with pixijs v7. When I test it with v8, I can't see anything on the screen.

Uncaught TypeError: Cannot read properties of undefined (reading 'canvas')
at get view [as view] (pixi.min.js:442:22899)

I get this error.

[SuperSodaSea]

In v8 you need to initialize PixiJS like this:

const app = new PIXI.Application();

await app.init({ background: '#1099bb', resizeTo: window });

document.body.appendChild(app.canvas);

[gonulbuya]

It does not work. The same error continues.

[bigtimebuddy]

Works fine here:
https://codesandbox.io/p/sandbox/nervous-sea-s7856y

[gonulbuya]

With this last example I didn't get the error.

[bigtimebuddy]

Then what was the issue? Can we close this?

[gonulbuya]

const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });

document.body.appendChild(app.view);

// create a new Sprite from an image path
const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add((delta) =>
{
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent transformation
bunny.rotation += 0.1 * delta;
});

When the problem is like the code I wrote above, I get an error.

https://codesandbox.io/p/sandbox/nervous-sea-s7856y

This example working.

yes you can turn it off