Unable to import

[dev-zetta]

Hello there,

both... require('pixi-layers) ...and... *import {Stage, Layer} from 'pixi-layers', or import as Layers from 'pixi-layers'** ...fails.

Uncaught ReferenceError: PIXI is not defined

I did import PIXI before the import call. import 'pixi.js' or import PIXI from 'pixi.js'

I also tried require.

Nothing works... same error. The layers plugin is not compatible with cjs and es imports?

[dev-zetta]

I even tried to tweak the compiler options, but no luck, it still doesn't export anything... everything is hidden behind namespace without any module export...

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist"
    },

[stefan-reloyalty]

Does *import as PIXI from 'pixi.js'** work? Place it before importing pixi-layers.

[ivanpopelyshev]

I'll add it to README.

import * as PIXI from 'pixi.js';
window.PIXI = PIXI;
import 'pixi-layers';

sometimes require('pixi-layers') works instead of import.

Here's the demo that works: https://codesandbox.io/s/tender-franklin-iycmu , look in app.js

[houd1ni]

Doesn't work with rollup. If deferred to get PIXI actually into window, PIXI object there becomes frozen.

[hdmr14]

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.

[TytiX]

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);

[hamoid]

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";

If I add that import to the top of dist/pixi-layers.js I get this error when building the app:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

I'm not experienced with JS build systems. A friend set it up for me using rollup. Any suggestions?

[hamoid]

Still testing but this seems to work:

import * as PIXI from 'pixi.js'
global.PIXI = PIXI
require('pixi-layers')

[fredericrous]

I am getting the Uncaught ReferenceError: PIXI is not defined error trying to import pixi-layers from a <script type="module"> tag

[ivanpopelyshev]

window,PIXI has to exist before you include pixi-layers. Or you can just wait when we publish new version where finally this thing is fixed.

[fredericrous]

I tried that 👇

<script type="module">
import * as PIXI from 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.9/pixi.min.js';
window.PIXI = PIXI
import 'https://cdn.jsdelivr.net/npm/pixi-layers@0.3.1/dist/pixi-layers.min.js';
document.addEventListener("DOMContentLoaded", function(event) {
  //bunny example from https://pixijs.io/examples/#/plugin-layers/lighting.js
})
</script>

this results in

ContainerMixin.ts:8 Uncaught ReferenceError: PIXI is not defined

[ivanpopelyshev]

imports work before all other code :(

need a require there, or maybe a configuration with two modules , one imports pixi and sets it in window, another imports first one and imports pixi-layers

[batman4444]

Checking in to see if there is a fix for this yet or a good workaround

Currently when I try:

  window.PIXI = await import("https://cdn.jsdelivr.net/npm/pixi.js@6.5.8/dist/browser/pixi.min.mjs");
  await import("https://cdn.jsdelivr.net/npm/@pixi/layers@1.0.11/dist/pixi-layers.umd.js");

inside a module it gives me the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'PIXI')
    at pixi-layers.umd.js:12:18

My understanding is that window.PIXI exists at the time layers is imported.

[ivanpopelyshev]

Why do you need layers in umd if you use imports?

[batman4444]

Thanks for the quick reply.

I was under the impression that the "universal" package was an appropriate package to import.

Sounds like I am wrong.

I have tried the non umd version

  window.PIXI = await import("https://cdn.jsdelivr.net/npm/pixi.js@6.5.8/dist/browser/pixi.min.mjs");
  import("https://cdn.jsdelivr.net/npm/@pixi/layers@1.0.11/dist/pixi-layers.min.js");

But I get a "ReferenceError: exports is not defined" error.

Is there a more appropriate way to dynamically import the layers plugin inside a module?

[ivanpopelyshev]

I actually dont know how to work with mjs pixi and plugins with usual browser import and not stuff like webpack. I believe @bigtimebuddy can explain how to do that with all pixi plugins.