(v4) GLSLify error when using Webpack

[Adam-Meisen]

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

[GoodBoyDigital]

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! 👍

[Adam-Meisen]

I only just discovered this library, so I'm afraid I really have no idea how gslify is used internally, but from some searching it seems like it's a very vague error message with many potential causes. What you suggested would probably work. Though ideally I'd like to figure out what causes this, sidestepping it entirely probably isn't a bad idea.

I still haven't managed to get it working, even with ify-loader, browserify-versionify, and glslify, though, so I've been using the cdn build of the library.

[stephanedemotte]

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

[bigtimebuddy]

I'm not super familiar with Webpack. Could someone make a simple test project/repo that reproduces this issue so I could use to debug?

[Relic]

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.

[endel]

There's some issues closed here regarding this problem, such as #2439 (comment). 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"
}

[Adam-Meisen]

Unfortunately, even with all of that, it still doesn't work for me.

[endel]

@Adam-Meisen that's odd. Do you mind sharing your webpack.config.js and package.json so I can have a look? Cheers!

[JVMartin]

+1 I also have this issue. I followed @stephanedemotte's temporary solution (above) for now.

[Adam-Meisen]

Hey, sorry about the wait, I went ahead and pared my project down to a reasonable minimum to make it as easy as possible to identify the problem.

As you can see in package.json, I've included all the modules that people have said are necessary to fix the issue.

    "browserify-versionify": "^1.0.6",
    "glslify": "^5.1.0",
    "ify-loader": "^1.0.3",

https://gist.github.com/Adam-Meisen/db219b1815633400844b350788a11a6e

Save the files to a directory and run webpack, then open index.html in a browser or serve it with webpack-dev-server.

[endel]

@Adam-Meisen hey, looks good for me. Do you have any errors with that configuration? It worked here:

Running on OSX 10.10.1, my Node and NPM version is the following:

$ node --version
v6.3.0
$ npm --version
3.10.3

[Adam-Meisen]

I'm on Windows, running node 6.3.1 and npm 3.10.6.

[endel]

Forgot to mention I'm using OSX. There must be something to do with this issue: glslify/glslify#77

[Relic]

@endel The above solution also not working for me - same issue as @Adam-Meisen. Still getting the glslify error even with proper packages installed and identical webpack.config.js.

[endel]

@xTiming can you confirm the operating system you're using?

[Relic]

@endel Windows 10, using Chrome as a browser.

[kimorkim]

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

[paralin]

The solution @kimorkim posted works well, but it messes up all the typings from DefinitelyTyped. Is there some way to alias 'pixi.js' to the binary version?

[ranglang]

for typings, i refer to external js files.

  externals: {
      // require("jquery") is external and available
      //  on the global var jQuery
      "pixi.js": "PIXI"
  },

import * as PIXI from "pixi.js";

[kimorkim]

I created a sample share.

https://github.com/ossas/sudoku_example2

Tell me if you ever have a problem

[englercj]

Closing this for now since it seems like there are solutions in here. Additionally for v5 we will be dropping glslfy and probably browserify as well.

[lock]

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.