Zealot

pixi-layers : PIXI is not defined

Recommended Posts

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).

Share this post


Link to post
Share on other sites

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 by Zealot

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.