layers: Unable to import

For those who have this issue here is an implementation of this “cheap” workaround that work for me.

in your webpack config:

var WebpackShellPlugin = require('webpack-shell-plugin');
...
plugins: [
  new WebpackShellPlugin({
    onBuildStart:['node webpack-pixi-layer-fix.js']
  }),
  ...
]
...

with this script :

var fs = require('fs');
var path = require('path');

var filePath = path.join(__dirname, 'node_modules', 'pixi-layers', 'dist', 'pixi-layers.js');
var prependText = 'import * as PIXI from \'pixi.js\';\n';

var data = fs.readFileSync(filePath, 'utf8');
var lines = data.split('\n');
var fileFirstLine = lines.length > 0 ? lines[0] : '';

console.log('--- check first line : ', fileFirstLine);

if (fileFirstLine !== prependText) {
  var fd = fs.openSync(filePath, 'w+');
  console.log('--- prepend text : ', prependText);
  fs.writeSync(fd, prependText, 'utf8');
  fs.appendFileSync(fd, data, 'utf8');
  fs.closeSync(fd);
}

data = fs.readFileSync(filePath, 'utf8');
lines = data.split('\n');
fileFirstLine = lines.length > 0 ? lines[0] : '';

console.log('--- check after first line : ', fileFirstLine);

Here is cheap workaround for module support. This worked for my situation that using pixi-layers with webpack or rollup.

First, forking plugin. Then just add import statement at top of dist/pixi-layers.js.

// top of dist/pixi-layers.js
import * as PIXI from "pixi.js";

When apply workaround above, import * as PIXI from "pixi.js" before import "pixi-layers" will work expected.

About known workarounds… import * as PIXI from "pixi.js" before import "pixi-layers" by user is meaningless. That imports PIXI to user’s scope only. Also window.PIXI = PIXI; workaround is incompatible with ES6 hoisting vehavior(It affects with rollup, babel, etc…). So, plugins should import pixi.js by themselves.