Skip to content
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

"Window is undefined" simply by importing pixi.js v4.0.3 #3224

funkjunky opened this issue Oct 30, 2016 · 5 comments

"Window is undefined" simply by importing pixi.js v4.0.3 #3224

funkjunky opened this issue Oct 30, 2016 · 5 comments


Copy link

@funkjunky funkjunky commented Oct 30, 2016

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:

"./ParticleBuffer":160,"./ParticleShader":162}],162:[function(t,e,r){function i(t){,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:


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

Copy link

@englercj englercj commented Oct 31, 2016

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: #3204 (comment)

Copy link

@lbineau lbineau commented Nov 16, 2016

Version 4.0.3 OK
Version 4.1.1 KO

With webpack PIXI is undefined

import PIXI from 'pixi.js'

Copy link

@themoonrat themoonrat commented Nov 16, 2016

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

Copy link

@olliebun olliebun commented Apr 20, 2017

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

Copy link

@lock lock bot commented Feb 24, 2019

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.

@lock lock bot locked and limited conversation to collaborators Feb 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants