Pixi.js: "Window is undefined" simply by importing pixi.js v4.0.3

[funkjunky]

First of all I know default import isn't defined in 4.1, so I'm using 4.0.3, until that is fixed.

Simply having a file with nothing but "import PIXI from 'pixi.js'" causes a webgl error calling window:

/Users/funk/Development/Projects/jayeh_2015/node_modules/pixi.js/bin/pixi.min.js:17
"./ParticleBuffer":160,"./ParticleShader":162}],162:[function(t,e,r){function i(t){n.call(this,t,["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","attribute vec2 aPositionCoord;","attribute vec2 aScale;","attribute float aRotation;","uniform mat3 projectionMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void){","   vec2 v = aVertexPosition;","   v.x = (aVertexPosition.x) * cos(aRotation) - (aVertexPosition.y) * sin(aRotation);","   v.y = (aVertexPosition.x) * sin(aRotation) + (aVertexPosition.y) * cos(aRotation);","   v = v + aPositionCoord;","   gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);","   vTextureCoord = aTextureCoord;","   vColor = aColor;","}"].join("\n"),["varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","uniform float uAlpha;","void main(void){","  vec4 color = texture2D(uSampler, vTexture

ReferenceError: window is not defined
    at Object.i.165../Math.sign (/source/src/particles/webgl/ParticleRenderer.js:403:1)
    at n (/source/node_modules/pixify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
    at /source/node_modules/pixify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1
    at Object.<anonymous> (/source/src/prepare/webgl/WebGLPrepare.js:181:1)
    at Object.i.170../accessibility (/source/src/prepare/webgl/WebGLPrepare.js:212:1)
    at n (/source/node_modules/pixify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
    at t (/source/node_modules/pixify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
    at /source/node_modules/pixify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1
    at h (/source/node_modules/pixify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
    at Object.<anonymous> (/source/node_modules/pixify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)

I'm not even certain what pixify is... but this only happens when I import pixi.js. [Not it's an isomorphic web app, which simply won't render if typeof window is undefined.]

EDIT: I remapped to the non-minified version and got this instead:

/Users/funk/Development/Projects/jayeh_2015/node_modules/pixi.js/bin/pixi.js:30763
if(!window.ArrayBuffer){

EDIT: It looks like a lot of code needs to be wrapped...

[englercj]

If this is isomorphic, then you are loading the code in node where pixi is not supported. We access DOM objects (such as window). Unfortunately we haven't taken the time to make it isomorphic because there honestly hasn't been much demand for it.

Often you need to polyfill/wrap a lot of the code to get it to work in node. If you could avoid loading pixi at all in node, that would be ideal.

---

To your first comment:

I know default import isn't defined in 4.1, so I'm using 4.0.3, until that is fixed.

Importing pixi as a default import is incorrect, please use the import * as PIXI from ''; syntax. We should not add a default export because there isn't one. See my comment here: https://github.com/pixijs/pixi.js/issues/3204#issuecomment-256751902

[lbineau]

Version 4.0.3 OK
Version 4.1.1 KO

With webpack PIXI is undefined

import PIXI from 'pixi.js'

[themoonrat]

You need to do
import * as PIXI from 'pixi.js
As englercj mentioned above. Reasons for no default export are given in this thread: https://github.com/pixijs/pixi.js/issues/3204

[ceralena]

In case any other unlucky person comes across this issue, this is how I got around it:

import isNode from 'detect-node'

let Container, WebGLRenderer
if (!isNode) {                                                                                                                                                                                        
    Container = require('pixi.js').Container
    WebGLRenderer = require('pixi.js').WebGLRenderer
}

This uses the detect-node npm package.

In es2015, imports are declared statically, so you can't disable the import in an isomorphic app without falling back to the old require() syntax.

Of course, this doesn't mean you can use pixi.js in the backend - but it does mean that you can evaluate your component tree without it blowing up on this import.

It's entirely understandable that the devs haven't focused on fixing this as it's a pretty narrow use case

[lock[bot]]

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.