Can't find variable: PIXI

[xjing97]

After imported pixi-filters, this error occurs

[Matt Karl]

Please provide more information, such as:

• What tools you're using (WebPack, etc)
• What versions of PixiJS and Pixi-Filters
• Show your code for how you're importing

In general PixiJS needs to be imported before pixi-filters:

import 'pixi.js';
import 'pixi-filters';

[Eduard Jacko]

"react-scripts": "^2.1.1", (webpack)
"pixi-filters": "^2.7.1",
"pixi.js": "^5.0.0-rc.2",

import * as PIXI from "pixi.js";
import "pixi-filters";

PIXI.filters.DropShadowFilter is undefined

also tried

import { DropShadowFilter } from "@pixi/filter-drop-shadow"

and DropShadowFilter is undefined

PIXI.filters. value:

also

import * as filters from "pixi-filters";

and filter value:

[Matt Karl]

Yup, right now PixiJS filters will have issues with v5 and bundlers, but I know what the issue is. I'll work on resolving this week.

Two potential workarounds:

import "pixi.js/dist/pixi.min.js";
import "pixi-filters";
console.log(PIXI.filters.DropShadowFilter);

If that doesn't work, you could also try this:

import * as PIXI from "pixi.js";
window.PIXI = PIXI;
import "pixi-filters";
console.log(PIXI.filters.DropShadowFilter);

[Eduard Jacko]

Thanks for suggestions, but none of above works. Still undefined. Here is what I tried

import * as PIXI from "pixi.js";
window.PIXI = PIXI;
import { DropShadowFilter } from "@pixi/filter-drop-shadow";
console.log(DropShadowFilter); // <-- exist
console.log(PIXI.filters.DropShadowFilter); // <-- undefined

Will probably wait for update then, can't really expose PIXI to window. Thank you for all the hard work. 🙌

[Matt Karl]

Thanks for giving those a try. There is no PIXI global to hang the filters on (unless you including filters/pixi via <script> element), so your code will probably end up looking something like this:

import * as PIXI from "pixi.js";
import { DropShadowFilter } from "@pixi/filter-drop-shadow";

Will work on a fix so that filters via bundlers aren't expecting PIXI

[Eduard Jacko]

what if you initialise filter with factory? Something like

import * as PIXI from "pixi.js";
import { DropShadowFilter, createFilter } from "pixi-filter";

const dropShadowFilter = createFilter(PIXI, DropShadow);

or because filter is already a constructor why not pass PIXI as argument?

const shadow = new DropShadowFilter(PIXI, options)

Maybe I'm off the course here and registering filters directly in PIXI is what community wants.

[Noah Chase]

This appears to be fixed in pixi-filters 3.x

[Matt Karl]

Thanks for verifying @nchase!

[trompx]

Hey @bigtimebuddy,

What do you mean it is fixed in 3.x ?

I try to use pixi twist filter (pixi version : 4.8.7) with pixi-filters 3.0.2 :

import * as PIXI from 'pixi.js';
import { TwistFilter } from '@pixi/filter-twist';
...
this.fx.twist = new TwistFilter();
this.fx.twist.radius = 0.1;
this.fx.twist.angle = 0.1;
this.fx.twist.offset.x = 0.1;
this.fx.twist.offset.y = 0.1;

but I get the error Cannot set property 'x' of undefined when it tries to set the offset.

[Matt Karl]

Please don’t pile on this isssue @trompx that’s a new, unrelated issue. The reason you’re having that problem is because you need to set offset = new Point().