How to use pixi-spine and pixi v3 with require.js

[gtothesquare]

After the upgrade, when we build the project using grunt-contrib-requirejs all goes well, however when we load it in the browser we get:

Uncaught ReferenceError: PIXI is not defined

So, after trying many things, we haven't been able to fix it and was wondering if somebody can provide a example of how to you pixi-spine with require.js.

This is how we have our require-config.js

shim: {
....
'PIXI': { exports: 'PIXI'},
....
},
paths: {
....
'PIXI': '../../node_modules/pixi.js/bin/pixi',
'spine': '../../node_modules/pixi-spine/bin/pixi-spine',
....
}

[englercj]

Why are you shimming pixi? It has a UMD export so it should export fine in rjs environments. The shim could liekly be shadowing the forced global export that plugins rely on. (pixi exports as UMD and always to window.PIXI)

[gtothesquare]

Just desperate tries, since PIXI is now exposed globally, but seems that then is not needed :). Still if we remove it we get the same problem.
Minified version the exception is in this line:

e.exports = PIXI.spine = {Spine: t("./Spine"),SpineRuntime: t("./SpineRuntime"),loaders: t("./loaders")}

For some reason it tries to load browserify, as you can see in the network tab http://snag.gy/0Bez0.jpg

[gtothesquare]

Seems the examples have a similar problem which is not related to require.js http://pixijs.github.io/examples/index.html?s=spine&f=dragon.js&title=Dragon&plugins=pixi-spine

[englercj]

The examples has a bad version of spine being uploaded on accident, I've fixed it.

As for your error, this happens when 1) pixi is not loaded first so the global doesn't exists, or 2) The global is shadowed by a shim or some such.

If you have a small testbed I can look at this further.

[gtothesquare]

Tried doing the testbed but couldn't. We ended up moving from requirejs to webpack and that solve the issue. Now we have another regarding spine looking for the atlas with the same the json file. This is a problem because we cache bust the files, so even if both are called dragon.png and dragon.atlas, when we build it it will have different rev.

BTW which pattern of UMD are you using https://github.com/umdjs/umd for both pixi and the pixi-spine plugin ?

[englercj]

We use the browserify standalone option, so whatever they do. As for the new issue, I would open a separate ticket.

[gtothesquare]

Thanks for help :) will do