pixi-layers : PIXI is not defined

[Zealot]

I've been trying to make pixi-layers work with Pixi 5 with no success, here's the code:

import * as PIXI from "pixi.js";
window.PIXI = PIXI;
require("pixi-layers");

const app = PIXI.autoDetectRenderer();

document.querySelector('.pixi').appendChild(app.view);

const stage = PIXI.display.Stage();

I'm trying to import pixi-layers the way it's recommended in the repo but I get this error on runtime:

main.js:14 Uncaught ReferenceError: PIXI is not defined

I've also tried to copy this example I've found but with no success, weirdly enough, the example seems to work perfectly fine, I don't see what's different in my code (I use Webpack for bundling).

[ivan.popelyshev]

There was a "how to use as provided" code somewhere but i lost it  I dont use webpack. I will appreciate if you make webpack config that does not embed pixi/pixi-layer inside build file and just uses it outside and we'll share it with people.

[Zealot]

Thanks for your answer Ivan, unfortunately it's a bit beyond my knowledge of webpack, I'll keep looking for a solution and post it here if I ever find one.

Naive question: why isn't pixi-layers directly included in Pixi?

Edited May 18, 2020 by Zealot

[ivan.popelyshev]

its old way of doing plugins, and we cant really move from it before next big pixi release. The combination of webpack/vanilla  and typescript compatibility is possible only with a few tricks like this one. So far everyone who solved that moved their libs to ES6 modules COMPLETELY. We cant do that without big research on how it affects our old users, we need to make an article on how to use new pixi+vanilla and move all plugins to new modules at the same time. Its hard.

Yes, I prioritize hardcore vanilla users over newbies with webpack. Not everyone like that in pixijs team, @bigtimebuddy thinks the other way, his pixi-filters are hard to use by vanilla. Hope all that will be sorted out soon

Edited May 18, 2020 by ivan.popelyshev

[Zealot]

Understood, thanks for these answers!

[charlie_says]

I had a similar issue, I was (and am) using webpack - but I'm not sure I'm working in the same way as you (I'm not using require in my project) I hope this helps:

 

[bubamara]

Really should be mentioned in Pixi wiki as it's frequent question.. Add this to you webpack config file:

plugins:
[
    new webpack.ProvidePlugin({
        PIXI: 'pixi.js'
    })
]

..and then only import pixi layers, spine, whatever.

[Zealot]

@charlie_says thank you for your answer, even though it didn't work in my case, it putted me on the way to what @bubamara said, I had actually found the solution but a bad config in my webpack conf was compiling the code in the wrong location ?‍♂️

So yes: simply providing PIXI through the webpack config is the way, thanks everyone for your help.

[TisRyno]

Sorry to dig this back up, albeit only a few months, for those who find this thread with the glorious answer of setting your webpack config to include the snippet kindly provided by @bubamara, I ran into a separate issue that happens (probably what @Zealot mentions)

Attempted import error: 'display' is not exported from 'pixi.js' (imported as 'PIXI').

My way of fixing this was to remove/set false the following:
 

module: {
      strictExportPresence: true
}

That stops Webpack from validating the existence of "display" from the actual pixi.js export.

If anyone knows of a way to make Webpack ignore on a case-by-case basis, please do update this as in the long run, I'd prefer to check