PixiJS fails to bootstrap when using only named imports

Expected Behavior

The following Pixi.JS sample should produce a black square, but instead the rendering does not seem to be performed at all.

import { Application } from '@pixi/app'

const app = new Application({width:100,height:100, backgroundColor: 0x000000});
document.body.appendChild(app.view);

This particular sample is part of https://github.com/kittykatattack/learningPixi#creating-the-pixi-application-and-stage. The tutorial itself is advertised on https://pixijs.com/tutorials/.

Current Behavior

The canvas for the app mounts, but it is blank and never renders the scene.

Possible Solution

I noticed that adding import 'pixi.js'; was sufficient to get the code to work.

1. Document the requirement to perform import 'pixi.js'; specifically when using named imports in the new setup (@pixi/*).
2. Have a dedicated package with side-effects for setting up pixi.js (e.g. @pixi/init).
3. Do (2) automatically from core pixi packages, specifically those that require the setup (@pixi/app).

Steps to Reproduce

1. Create an empty project. For example, using a vitejs typescript template
2. Add pixi.js as package dependency
3. Use the sample from earlier
4. Run the app
5. If correct you will observe “Current Behavior”

Environment

• pixi.js version: PixiJS 6.1.3 - ✰ WebGL 2 ✰
• Browser & Version: Chrome 95
• OS & Version: Win10
• Running Example: https://codesandbox.io/s/happy-cloud-fbzk6?file=/src/index.ts

[bigtimebuddy]

Try this:

import { Application } from 'pixi.js'

Not this:

import { Application } from '@pixi/app'

Importing the sub packages directly is fine, but there’s some “glue” code that needs to be imported to wire up all the plugins. Importing only app will not include these important bits. Check out https://pixijs.io/customize to see what the glue code looks like.

I suggest you import names exports from the pixi.js package instead.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.