Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compatibility with webpack #1854

Closed
fusepilot opened this issue May 28, 2015 · 16 comments

Comments

@fusepilot
Copy link

commented May 28, 2015

var PIXI = require('pixi.js');

First attempt gave me a bunch of webpack errors:

ERROR in ./~/pixi.js/src/filters/ascii/AsciiFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/ascii
 @ ./~/pixi.js/src/filters/ascii/AsciiFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurXFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurXFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurYFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurYFilter.js 3:9-22

etc...

So I set node: { fs: "empty" } in webpack's config and that got rid of the above errors.

But then this error:

ERROR in ./~/pixi.js/package.json
Module parse failed: /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "pixi.js",
|   "version": "3.0.6",
|   "description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
 @ ./~/pixi.js/src/core/const.js 14:13-42

So I added json-loader to webpack's config.

module: {
  loaders: [{
    test: /\.json$/,
    loader: 'json-loader'
  }]
}

Success. Would be nice if this worked out of box though.

@englercj

This comment has been minimized.

Copy link
Member

commented May 28, 2015

We use browserify brfs transform:

https://github.com/GoodBoyDigital/pixi.js/blob/master/package.json#L57-L61

I'm not sure how you would make that webpack compatible, are there any articles on webpack running browserify transforms?

@drkibitz

This comment has been minimized.

Copy link
Contributor

commented May 29, 2015

@mking

This comment has been minimized.

Copy link

commented Jun 6, 2015

@drkibitz @englercj Thanks for the hint, I was able to get started with Pixi+Webpack using transform-loader+json-loader.

@fusepilot Here is the webpack config I am using.

@oal

This comment has been minimized.

Copy link
Contributor

commented Jul 4, 2015

I couldn't get @mking's config to work when using Babel. I had to move brfs to postLoaders, but now it works: https://gist.github.com/oal/898df82fa64e54dd16d0

@englercj

This comment has been minimized.

Copy link
Member

commented Aug 2, 2015

Closing since this seems answered.

@RanzQ

This comment has been minimized.

Copy link
Contributor

commented Oct 31, 2015

I wasn't able to solve a problem where pixi.js/src/core/const.js tries to require ../../package.json and thows an error Cannot find module "../../package.json". I tried with both ways by @oal. This happens only when I'm using hot module reload though, on production build it works fine.

I ended up using the built version of pixi.js like import PIXI from 'pixi.js/bin/pixi.js'. And now I see a warning but hot reload works:

[HMR] ./~/pixi.js/bin/pixi.js Critical dependencies: 34:477-484 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/pixi.js/bin/pixi.js 34:477-484

@englercj

This comment has been minimized.

Copy link
Member

commented Oct 31, 2015

I guess you might need some kind of plugin for webpack for it to support .json require loading? Node/browserify support it natively.

@RanzQ

This comment has been minimized.

Copy link
Contributor

commented Oct 31, 2015

@englercj It's supported when json-loader is configured. I'm not an expert with webpack but this might be some problem caused by webpack-hot-middleware, since the bundle works, the error appears on dev mode only.

@englercj

This comment has been minimized.

Copy link
Member

commented Oct 31, 2015

Hmm, weird. Yeah sorry i'm not familiar with it either :/

@Nazariglez

This comment has been minimized.

Copy link

commented Nov 12, 2015

Webpack has an option to load "pre-packed" libraries without parse it (like pixi.js), just add noParse to your module section at webpack config, something like that:

module: { noParse: [ /.*(pixi\.js).*/ ], }

This snippet must solve the problem with the internal requires.

@davydka

This comment has been minimized.

Copy link

commented Jan 7, 2016

This is the most direct and simple example of configuring webpack with PIXI that I found.

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

jiku added a commit to jiku/meteor that referenced this issue Jan 20, 2016
Maybe related issues with PIXI through Webpack

pixijs/pixi.js#1854
pixijs/pixi.js#2078

Where they set

node: {
    fs: "empty"
}
@jiku jiku referenced this issue Jan 21, 2016
@FlorianBELLAZOUZ

This comment has been minimized.

Copy link

commented Mar 21, 2016

This gist is the most simple webpack + pixi.js config :

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

( with great comments )

@cltatman

This comment has been minimized.

Copy link

commented May 8, 2016

the gist linked above suffers from a bug related to 5a53e38 - pixi's version number is reported as __VERSION__

webpack.config.js should include this loader:

{
  include: path.resolve(__dirname, 'node_modules/pixi.js'),
  loader: 'transform/cacheable?browserify-versionify'
}

@mjackson mentioning here because gist comments don't send notifications apparently 😞

@czanella

This comment has been minimized.

Copy link

commented Jul 17, 2016

Just ran into this problem. Thanks a lot for the solution!

@Nek-

This comment has been minimized.

Copy link

commented Sep 25, 2017

Here is a working configuration for Webpack / Typescript and PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

@lock

This comment has been minimized.

Copy link

commented Feb 24, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked and limited conversation to collaborators Feb 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.