Jump to content

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;

const app = PIXI.autoDetectRenderer();


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

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...