[GSAP-PixiPlugins & Pixi v5.0.0-rc.3 & Webpack] Cannot read property 'DisplayObject' of undefined

[stephanedemotte]

Hello error with pixiplugin and Pixi v5 rc3

import { Container } from 'pixi.js'

const test  = new Container()

TweenMax.to(test, 1, { pixi: { alpha: 0 }})

Work fine with Pixi v5 rc0

Thanks !

-- EDIT 1

Quick dirty fix

import * as PIXI from 'pixi.js'
window.PIXI = PIXI

-- EDIT 2 To use the power of tree shaking we can simply import what we use

import { _gsScope } from 'gsap/TweenLite'
import { filters, DisplayObject } from 'pixi.js'

_gsScope['PIXI'] = {
  filters: filters,
  DisplayObject: DisplayObject
}

and don't forget to

import { TweenMax, CSSPlugin, ScrollTo, PixiPlugin } from 'gsap/all'
// because of three shaking
const gsapPlugins = [ TweenMax, CSSPlugin, PixiPlugin, ScrollTo ]

When we build

[jackdoyle]

Right, PixiPlugin needs some reference to the PIXI library object, which it looks for in the global scope (window in most cases). That's not really a bug or anything - it's just the nature of the beast. I assume you're using this in a build system or ES module environment rather than directly in the browser.

I'm thinking perhaps it's wise to add a PixiPlugin.registerPIXI() method that you can pass a reference into directly, like:

PixiPlugin.registerPIXI(PIXI);

I'm open to suggestions. For now, your workaround is fine or you can set it directly on the _gsScope object which is exported by TweenMax, TweenLite, and gsap/all.

[jackdoyle]

The registerPIXI() method was added in GSAP 2.1.3.