Zealot Posted May 18, 2020 Share Posted May 18, 2020 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). Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 18, 2020 Share Posted May 18, 2020 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. Quote Link to comment Share on other sites More sharing options...
Zealot Posted May 18, 2020 Author Share Posted May 18, 2020 (edited) 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 18, 2020 Share Posted May 18, 2020 (edited) 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 1 Quote Link to comment Share on other sites More sharing options...
Zealot Posted May 18, 2020 Author Share Posted May 18, 2020 Understood, thanks for these answers! Quote Link to comment Share on other sites More sharing options...
charlie_says Posted May 18, 2020 Share Posted May 18, 2020 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: Zealot 1 Quote Link to comment Share on other sites More sharing options...
bubamara Posted May 19, 2020 Share Posted May 19, 2020 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 1 Quote Link to comment Share on other sites More sharing options...
Zealot Posted May 19, 2020 Author Share Posted May 19, 2020 @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. bubamara and charlie_says 2 Quote Link to comment Share on other sites More sharing options...
TisRyno Posted July 7, 2020 Share Posted July 7, 2020 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.