To whom it may concern,
Having a real basic problem here. Cannot get Pixi.js examples working with Node.js.
This is what I tried...
$ npm install pixi
$ cat main.js
// Require pixi module
var pixi = require('pixi');
// You can use either WebGLRenderer or CanvasRenderer
var renderer = pixi.WebGLRenderer(800, 600);
document.body.appendChild(renderer.view);
var stage = new pixi.Stage();
var bunnyTexture = pixi.Texture.fromImage("bunny.png");
var bunny = new pixi.Sprite(bunnyTexture);
bunny.position.x = 400;
bunny.position.y = 300;
bunny.scale.x = 2;
bunny.scale.y = 2;
stage.addChild(bunny);
requestAnimationFrame(animate);
function animate() {
bunny.rotation += 0.01;
renderer.render(stage);
requestAnimationFrame(animate);
}
$ node main.js
/Users/spellegrino/node.js/pixi.js/node_modules/pixi/platform.js:11
!function(a){"use strict";module.exports={global:a,console:a.console,document:a.document,location:a.location,navigator:a.navigator,window:a.window,createCanvas:function(){return a.document.createElement("canvas")},createImage:function(){return new a.Image},createRequest:function(){return new a.XMLHttpRequest}}}("undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{});
^
TypeError: Cannot read property 'createElement' of undefined
at Object.module.exports.createCanvas (/Users/spellegrino/node.js/pixi.js/node_modules/pixi/platform.js:11:189)
at Object.WebGLRenderer (/Users/spellegrino/node.js/pixi.js/node_modules/pixi/renderers/webgl/WebGLRenderer.js:11:134)
at Object.<anonymous> (/Users/spellegrino/node.js/pixi.js/tmp/main.js:5:21)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3
What am I doing wrong?
Kind regards,
-Stacey Pellegrino
Pretty sure you're using the deprecated https://github.com/drkibitz/node-pixi, which is a few years old. Try npm install pixi.js instead.
That said, I don't know if pixi.js supports rendering without a browser. Issues like Cannot read property 'createElement' of undefined might get thrown if there isn't a DOM, so maybe jsdom or something similar might help. Otherwise, no idea if WebGL/canvas can run on bare Node.js (without xvfb, Chrome headless, Firefox/Selenium, etc).
Just installed canvas on macOS with...
$ brew install pkg-config cairo pango libpng jpeg giflib
$ npm install canvas
Staceys-Air:tmp spellegrino$ ls -l node_modules/
total 0
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 abbrev
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 ajv
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 ansi-regex
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 aproba
drwxr-xr-x 12 spellegrino staff 384 19 Mar 11:01 are-we-there-yet
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 asn1
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 assert-plus
drwxr-xr-x 12 spellegrino staff 384 19 Mar 11:01 asynckit
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 aws-sign2
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 aws4
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 balanced-match
drwxr-xr-x 5 spellegrino staff 160 19 Mar 11:01 bcrypt-pbkdf
drwxr-xr-x 9 spellegrino staff 288 19 Mar 10:52 bit-twiddle
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 block-stream
drwxr-xr-x 11 spellegrino staff 352 19 Mar 11:01 boom
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 brace-expansion
drwxr-xr-x 15 spellegrino staff 480 19 Mar 11:01 canvas
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 caseless
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 co
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 code-point-at
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 combined-stream
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 concat-map
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 console-control-strings
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 core-util-is
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 cryptiles
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 dashdash
drwxr-xr-x 15 spellegrino staff 480 19 Mar 11:01 debug
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 deep-extend
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 delayed-stream
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 delegates
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 detect-libc
drwxr-xr-x 11 spellegrino staff 352 19 Mar 10:52 earcut
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 ecc-jsbn
drwxr-xr-x 8 spellegrino staff 256 19 Mar 10:52 eventemitter3
drwxr-xr-x 12 spellegrino staff 384 19 Mar 11:01 extend
drwxr-xr-x 11 spellegrino staff 352 19 Mar 11:01 extsprintf
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 forever-agent
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 form-data
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 fs.realpath
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 fstream
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 fstream-ignore
drwxr-xr-x 21 spellegrino staff 672 19 Mar 11:01 gauge
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 getpass
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 glob
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 graceful-fs
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 har-schema
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 har-validator
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 has-unicode
drwxr-xr-x 14 spellegrino staff 448 19 Mar 11:01 hawk
drwxr-xr-x 11 spellegrino staff 352 19 Mar 11:01 hoek
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 http-signature
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 inflight
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 inherits
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 ini
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 is-fullwidth-code-point
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 is-typedarray
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 isarray
drwxr-xr-x 12 spellegrino staff 384 19 Mar 10:52 ismobilejs
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 isstream
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 jsbn
drwxr-xr-x 13 spellegrino staff 416 19 Mar 11:01 json-schema
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 json-stable-stringify
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 json-stringify-safe
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 jsonify
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 jsprim
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 mime-db
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 mime-types
drwxr-xr-x 12 spellegrino staff 384 19 Mar 10:52 mini-signals
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 minimatch
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 minimist
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 mkdirp
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 ms
drwxr-xr-x 30 spellegrino staff 960 19 Mar 11:01 nan
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 node-pre-gyp
drwxr-xr-x 12 spellegrino staff 384 19 Mar 11:01 nopt
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 npmlog
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 number-is-nan
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 oauth-sign
drwxr-xr-x 6 spellegrino staff 192 19 Mar 10:52 object-assign
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 once
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 os-homedir
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 os-tmpdir
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 osenv
drwxr-xr-x 16 spellegrino staff 512 19 Mar 10:52 parse-uri
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 path-is-absolute
drwxr-xr-x 12 spellegrino staff 384 19 Mar 11:01 performance-now
drwxr-xr-x 7 spellegrino staff 224 19 Mar 10:52 pixi-gl-core
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 pixi.js
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 process-nextick-args
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 punycode
drwxr-xr-x 12 spellegrino staff 384 19 Mar 11:01 qs
drwxr-xr-x 14 spellegrino staff 448 19 Mar 11:01 rc
drwxr-xr-x 18 spellegrino staff 576 19 Mar 11:01 readable-stream
drwxr-xr-x 9 spellegrino staff 288 19 Mar 10:52 remove-array-items
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 request
drwxr-xr-x 8 spellegrino staff 256 19 Mar 10:52 resource-loader
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 rimraf
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 safe-buffer
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 semver
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 set-blocking
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 signal-exit
drwxr-xr-x 12 spellegrino staff 384 19 Mar 11:01 sntp
drwxr-xr-x 11 spellegrino staff 352 19 Mar 11:01 sshpk
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 string-width
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 string_decoder
drwxr-xr-x 9 spellegrino staff 288 19 Mar 11:01 stringstream
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 strip-ansi
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 strip-json-comments
drwxr-xr-x 11 spellegrino staff 352 19 Mar 11:01 tar
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 tar-pack
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 tough-cookie
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 tunnel-agent
drwxr-xr-x 14 spellegrino staff 448 19 Mar 11:01 tweetnacl
drwxr-xr-x 7 spellegrino staff 224 19 Mar 11:01 uid-number
drwxr-xr-x 8 spellegrino staff 256 19 Mar 11:01 util-deprecate
drwxr-xr-x 16 spellegrino staff 512 19 Mar 11:01 uuid
drwxr-xr-x 10 spellegrino staff 320 19 Mar 11:01 verror
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 wide-align
drwxr-xr-x 6 spellegrino staff 192 19 Mar 11:01 wrappy
`Now I get the following error...`
$ node main.js
module.js:327
throw err;
^
Error: Cannot find module 'pixi'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (/Users/spellegrino/node.js/tmp/main.js:2:12)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
Looks like you still have require('pixi') somewhere instead of require('pixi.js'). #2271 may be of interest to you, as well as the node-pixi or pixi-shim project.
Lastly, the error had your answer in plain text, Error: Cannot find module 'pixi'. I have a suspicion that you may be a bit new to Node.js. (Sincere apologies if you aren't.) Here are a couple resources to read up on so you don't have to thrash around:
I am new to node.js so forgive me.
if (!window.ArrayBuffer) {
^
ReferenceError: window is not defined
at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/polyfill/index.js:9:6)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/index.js:6:17)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
Changed this...
$ grep node_modules main.js
var pixi = require('./node_modules/pixi.js');
You should read up on the resources I sent you, as well as the docs on jsdom. You'll find the answers there.
Installed jsdom modules...
$ npm install --save-dev --save-exact jsdom jsdom-global
I have no novice issues with require statements and have started using jsdom in my script now. But defining a pretend window doesn't have the desired result!
$ cat main.js
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const window = (new JSDOM(``, { pretendToBeVisual: true })).window;
window.requestAnimationFrame(timestamp => {
console.log(timestamp > 0);
});
// Require pixi module
var pixi = require('pixi.js');
// You can use either WebGLRenderer or CanvasRenderer
var renderer = pixi.WebGLRenderer(800, 600);
document.body.appendChild(renderer.view);
var stage = new pixi.Stage();
var bunnyTexture = pixi.Texture.fromImage("bunny.png");
var bunny = new pixi.Sprite(bunnyTexture);
bunny.position.x = 400;
bunny.position.y = 300;
bunny.scale.x = 2;
bunny.scale.y = 2;
stage.addChild(bunny);
requestAnimationFrame(animate);
function animate() {
bunny.rotation += 0.01;
renderer.render(stage);
requestAnimationFrame(animate);
}
Staceys-Air:tmp spellegrino$ node main.js
/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/polyfill/index.js:9
if (!window.ArrayBuffer) {
^
ReferenceError: window is not defined
at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/polyfill/index.js:9:6)
at Module._compile (module.js:577:32)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/index.js:6:17)
at Module._compile (module.js:577:32)
What am I doing wrong here or is there something else I need to do? Thanks.
global.window instead of const window
also why not use my pixi-shim ?
just const PIXI = require('pixi-shim')
Needed the following lines...
global.window = (new JSDOM(``, { pretendToBeVisual: true })).window;
window.requestAnimationFrame(timestamp => {
console.log(timestamp > 0);
});
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
Changed...
var pixi = require('pixi.js');
...to...
const pixi = require('pixi-shim');
What is the advantage with using pixi-shim?
After all those changes and other errors resolved I now get the following error when trying to run...
$ node main.js
pixi-shim: detected browser environment
pixi-shim: load pixijs
pixi-shim: initialized in: 1018.299ms
/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
^
TypeError: Cannot call a class as a function
at _classCallCheck (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63:99)
at Object.WebGLRenderer (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:115:9)
at Object.<anonymous> (/Users/spellegrino/node.js/tmp/main.js:33:21)
at Module._compile (module.js:577:32)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.runMain (module.js:611:10)
at run (bootstrap_node.js:387:7)
```
look at the code of pixi-shim: https://github.com/Prozi/pixi-shim/blob/master/index.js
as you can see jsdom and other things (like canvas library) get lazy* loaded for your convenience
when you initialize jsdom manually before using pixi-shim you initialize window in node global.window enviromnent which leads to my pixi-shim thinking you're in browser and not initializing itself properly
dont use anything besides pixi-shim on the node side, it's not required.
advantages are listed here: https://github.com/Prozi/pixi-shim/blob/master/README.md + it uses latest pixi version + you dont have to include anything in you enviroment
mind you its designed for node use, for frontend just require pixi normally
Just using pixi-shim and it now initialises properly but I get the same following error regarding WebGLRenderer.js...
$ node main.js
pixi-shim: polyfill dom
pixi-shim: load pixijs
pixi-shim: initialized in: 1684.430ms
/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
^
TypeError: Cannot call a class as a function
at _classCallCheck (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63:99)
at Object.WebGLRenderer (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:115:9)
at Object.<anonymous> (/Users/spellegrino/node.js/tmp/main.js:20:21)
at Module._compile (module.js:577:32)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.runMain (module.js:611:10)
at run (bootstrap_node.js:387:7)
it looks like you have error on /Users/spellegrino/node.js/tmp/main.js:20 20th line of your code
Okay. Couldn't fix that line but found code on pixijs.com that does the same thing. It is the basic.js example. I include the reference to pixi-shim at the top and all loads fine...
$ cat basic.js
const PIXI = require('pixi-shim');
var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);
// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
// center the sprite's anchor point
bunny.anchor.set(0.5);
// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);
// Listen for animate update
app.ticker.add(function(delta) {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent transformation
bunny.rotation += 0.1 * delta;
});
Staceys-Air:tmp spellegrino$ node basic.js
pixi-shim: polyfill dom
pixi-shim: load pixijs
pixi-shim: initialized in: 5942.611ms
PixiJS 4.7.1 - Canvas - http://www.pixijs.com/
But when I go to http://localhost:3000 the page doesn't render! Apart from referencing pixi-shim what else is requied to get this example to work at http://localhost:3000?
you're doing it wrong. you're trying to start a frontend app then you need to do it on front
node should be only used here as a server for static files propably
why would it load at localhost:3000 where is the code to serve the files (http server in node)
read more here https://stackoverflow.com/questions/10434001/static-files-with-express-js
just create index.html and paste the example from pixi.js website and it works
then you can static serve the file (index.html) and voila
Closing as I think you're covered with help from prozi, but feel free to re-open if you're still having issues :)
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.
Most helpful comment
We successfully run pixi on node (for unit testing purposes) using jsdom + canvas, those errors you are getting are due to pixi trying to access the dom.