pixijs: PIXI is not compatible with Angular v6

An Angular v6 app that imports PIXI fails to compile. I think this is likely related to this issue:

As of version 6, Angular-Cli no longer:

provides a shim for global and process.
supplies an empty module when fs, crypto, tls and net are requested.

Is there a suitable workaround for this issue or does the PIXI code need to be updated to make it compatible with Angular v6?

Expected Behavior

An Angular v6 app that imports PIXI should compile.

Current Behavior

Compilation fails with the following error:

ERROR in ./node_modules/pixi.js/lib/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/core/renderers/webgl/filters/spriteMask'
ERROR in ./node_modules/pixi.js/lib/core/sprites/webgl/generateMultiTextureShader.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/core/sprites/webgl'
ERROR in ./node_modules/pixi.js/lib/extras/webgl/TilingSpriteRenderer.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/extras/webgl'
ERROR in ./node_modules/pixi.js/lib/filters/alpha/AlphaFilter.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/filters/alpha'
ERROR in ./node_modules/pixi.js/lib/filters/colormatrix/ColorMatrixFilter.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/filters/colormatrix'
ERROR in ./node_modules/pixi.js/lib/filters/displacement/DisplacementFilter.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/filters/displacement'
ERROR in ./node_modules/pixi.js/lib/filters/fxaa/FXAAFilter.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/filters/fxaa'
ERROR in ./node_modules/pixi.js/lib/filters/noise/NoiseFilter.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/filters/noise'
ERROR in ./node_modules/pixi.js/lib/loaders/bitmapFontParser.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/loaders'
ERROR in ./node_modules/pixi.js/lib/mesh/webgl/MeshRenderer.js
Module not found: Error: Can't resolve 'path' in '/Users/samalexander/Developer/test-pixi/node_modules/pixi.js/lib/mesh/webgl'

Steps to Reproduce

I have created a basic Angular project here that demonstrates this issue. To run the project: clone the repo, install dependencies with yarn install and run yarn start to build and serve the app. You will see the error message above is displayed when build fails.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 21 (5 by maintainers)

Most upvoted comments

I change d.ts file to declare module “pixi.js/dist/pixi.js” { export = PIXI; } and import to project import * as PIXI from “pixi.js/dist/pixi.js”; type checking works! pixi v4.8.1 d.ts 4.8.0

sanasus on Jun 23, 2018

We are currently on Angular 7.1 and have reverted from the 5 alpha back to PIXI 4.8.5.

I have fixed this by adding the pixi dist file to the angular.json scripts property.

// excerpt of angular.json   
"architect": {    
        "build": {    
            "scripts": [    
              "node_modules/pixi.js/dist/pixi.min.js"    
            ]    
          },     
}

And importing the typing as followed.

declare const PIXI: typeof import('pixi.js');

generalcss on Jan 14, 2019

If you want Canvas use pixi.js-legacy module instead. We removed canvas from the default module.

bigtimebuddy on May 22, 2018

Oh yup, you’re right! Well glad to know it solved the primary issue. Another idea, if you didn’t want to move to v5 yet is to import with Angular using the built file: import * as PIXI from 'pixi.js/dist/pixi.js'; this will not try to use any Node-specific APIs.

bigtimebuddy on May 22, 2018