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 · 15 comments

Comments

Projects
None yet
@fusepilot

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

Show comment
Hide comment
@englercj

englercj May 28, 2015

Member

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?

Member

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

Show comment
Hide comment
Contributor

drkibitz commented May 29, 2015

@mking

This comment has been minimized.

Show comment
Hide comment
@mking

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

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

Show comment
Hide comment
@oal

oal Jul 4, 2015

Contributor

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

Contributor

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

Show comment
Hide comment
@englercj

englercj Aug 2, 2015

Member

Closing since this seems answered.

Member

englercj commented Aug 2, 2015

Closing since this seems answered.

@RanzQ

This comment has been minimized.

Show comment
Hide comment
@RanzQ

RanzQ Oct 31, 2015

Contributor

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

Contributor

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

Show comment
Hide comment
@englercj

englercj Oct 31, 2015

Member

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

Member

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

Show comment
Hide comment
@RanzQ

RanzQ Oct 31, 2015

Contributor

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

Contributor

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

Show comment
Hide comment
@englercj

englercj Oct 31, 2015

Member

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

Member

englercj commented Oct 31, 2015

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

@Nazariglez

This comment has been minimized.

Show comment
Hide comment
@Nazariglez

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

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

Show comment
Hide comment
@davydka

davydka 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

davydka 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

Illustrates issue with importing PIXI on client.
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

Closed

jiku/modules/pixi #6053

@FlorianBELLAZOUZ

This comment has been minimized.

Show comment
Hide comment
@FlorianBELLAZOUZ

FlorianBELLAZOUZ Mar 21, 2016

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

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

( with great comments )

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

Show comment
Hide comment
@cltatman

cltatman 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 😞

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

Show comment
Hide comment
@czanella

czanella Jul 17, 2016

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

czanella commented Jul 17, 2016

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

@Nek-

This comment has been minimized.

Show comment
Hide comment
@Nek-

Nek- Sep 25, 2017

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

Nek- commented Sep 25, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment