pixijs: (v4) GLSLify error when using Webpack

Running my Pixi app after bundling with Webpack results in the following error:

browser.js:2 Uncaught Error: It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform

Some research suggests this is a common problem among Webpack users. https://gist.github.com/mjackson/ecd3914ebee934f4daf4#gistcomment-1842689

This solution seems to work for some people, but I still haven’t gotten it working. I’m posting an issue to see if we can come up with a common guideline for making Pixi work in a webpack app.

To reproduce the problem, simply make a webpack app with the following contents:

var PIXI = require('pixi.js');
var renderer = new PIXI.WebGLRenderer(256, 256);

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 22 (8 by maintainers)

Most upvoted comments

@endel @xTiming Hi, guys. I found a way.

webpack.config.js

module: {
        loaders: [
            ...
            { test: path.resolve(__dirname, 'node_modules', 'pixi.js'), loader: 'ify' },
            ...
        ]
    },

The window separator is . Unlike its osx.

It is seen as well in the window10.

kimorkim on Sep 18, 2016

You can reproduce this with the following:

npm install pixi.js webpack

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, 'scripts/'),
        filename: 'bundle.js'
    },
    node: {
        fs: 'empty'
    }
};

index.js

var PIXI = require('pixi.js');
console.log(PIXI);
var renderer = new PIXI.WebGLRenderer(512, 512);

From the project’s root folder:

webpack --config webpack.config.js

The resulting (projectroot)/scripts/bundle.js can be accessed in a web browser and will reproduce the glslify error. Just wrote and tested it myself very quickly, if this doesn’t work let me know and I’ll try to fix it for you.

Relic on Sep 9, 2016

There’s some issues closed here regarding this problem, such as https://github.com/pixijs/pixi.js/issues/2439#issuecomment-243820323. Not sure how PIXI could provide out-of-the-box compatibility without these custom configuration on host project though.

You can successfully require it using webpack by using the configuration below. I tested only on webpack 2.x, but should be fine on 1.x as well.

webpack.config.js:

  module: {
    loaders: [
      /// ...
      { test: /node_modules\/pixi\.js/, loader: 'ify' },
    ]
  },

package.json:

"devDependencies": {
  "browserify-versionify": "^1.0.6",
  "glslify": "^5.1.0",
  "ify-loader": "^1.0.3",
  "pixi.js": "^4.0.0"
}

endel on Sep 10, 2016

+1 to fix it, for now i use the pre-build version `import PIXI from ‘pixi.js/bin/pixi.js’

stephanedemotte on Sep 9, 2016

Hi @Adam-Meisen ! Had this issue pop up a few times now and I have recently experienced it myself first hand! Time to get it fixed I think 💃

Would replacing glsify with raw text do the trick you think? We are not using anything specific to glslify just yet…

Thoughts welcome! 👍

GoodBoyDigital on Sep 6, 2016