Pixi v5 support

[DimaSamusenko]

Hi!
Pixi-Tween 0.2.0 not working with Pixi.js 5.0.0-rc.3

Uncaught ReferenceError: PIXI is not defined
at Object../node_modules/pixi-tween/build/pixi-tween.js (pixi-tween.js:formatted:1)
at e (pixi-tween.js:formatted:1)
at Object. (pixi-tween.js:formatted:1)
at e (pixi-tween.js:formatted:1)
at Object../node_modules/pixi-tween/build/pixi-tween.js (pixi-tween.js:formatted:1)
at e (pixi-tween.js:formatted:1)
at pixi-tween.js:formatted:1
at Object../node_modules/pixi-tween/build/pixi-tween.js (pixi-tween.js:formatted:1)
at webpack_require (pixi-tween.js:formatted:1)
at Module../src/scripts/app/hints_component/limit_hints.js (pixi-tween.js:formatted:1)

[Pionniers]

Hello can anyone help on this I have the same problem

[thedrint]

Same error.

[thedrint]

Hello can anyone help on this I have the same problem

Quick solution is to clone/download files from src/ and import tweenManager from './index';
But in this case webpack show warning on building "export 'tween' (imported as 'PIXI') was not found in 'pixi.js' etc. So if you can live with warnings on build - this is temporary solution.

[Pionniers]

Because PIXI object is not defined when using Pixi.js 5.0.0 the tweenManager cannot read it. I don't know
how to export PIXI object to tweenManager library

[llorenspujol]

Yes, pixiJs v5 doesn't add PIXI to the window object.
The simplest way to patch it is just add PIXI to the window object manually... like:

import * as PIXI from 'pixi.js';
window['PIXI'] = PIXI;
import 'pixi-tween';

Hope this helps!

[ShukantPal]

Yes, pixiJs v5 doesn't add PIXI to the window object.
The simplest way to patch it is just add PIXI to the window object manually... like:

import * as PIXI from 'pixi.js';
window['PIXI'] = PIXI;
import 'pixi-tween';

Hope this helps!

This is actually a troubling advice because Babel will reorder statements between imports to after the imports. This misses the whole point of giving window.PIXI to pixi-tween. Using require in place of import solves the problem: webpack/webpack#1343

const PIXI = require('pixi.js');
window.PIXI = PIXI;
const PixiTween = require('pixi-tween');

[tbrebant]

This problem is still here and it feels very weird to still have to use an ugly workaround (requires in the middle of imports and exposing stuff on window 😞).

An alternative solution I found with webpack is to load the packages dynamically:

import(/* webpackChunkName: "pixi.js" */ 'pixi.js').then((module) => {
  window.PIXI = module; // required for pixi-tween
  import(/* webpackChunkName: "pixi-tween" */ 'pixi-tween').then((module) => {
    // we are ready
  });
});

[chung-nguyen]

The package is not that complicated to re-engineer. The author made it quite clean. I suggest forking it and fix the issue yourself. I would do it if I have some time.

Otherwise, my work around is just simply copy the whole src folder of pixi-tween to your own project and import the file index.js like this:

import * as PIXI from 'pixi.js';
import './lib/pixi-tween';