pixiJS + gsap + create-react-app = webpack/babel error

[Angus13]

Hi all!
 

I'm trying to use PIXI & gsap in my react app created using create-react-app, however, am getting an error on npm start.

 

Versions

create-react-app v5.0.1

gsap v3.11.3

pixi.js v7.0.4

 

Code

import * as PIXI from "pixi.js";

import { PixiPlugin } from "gsap/PixiPlugin";

 

gsap.registerPlugin(PixiPlugin);

PixiPlugin.registerPIXI(PIXI);      //this is what causes the error

 

I run npm install, all fine. I then run npm start and I get the following error:

ERROR in ./node_modules/@pixi/core/lib/textures/resources/ImageBitmapResource.mjs

 

SyntaxError: ./node_modules/@pixi/core/lib/textures/resources/ImageBitmapResource.mjs: When using '@babel/plugin-transform-parameters', it's not possible to compile `super()` in an arrow function with default or rest parameters without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration.
   6 |   constructor(source, options) {
   7 |     var __super = (...args) => {
>  8 |       super(...args);
     |       ^^^^^^^^^^^^^^
   9 |     };
  10 |     options = options || {};
  11 |     if (typeof source === "string") {

.

.

.

webpack compiled with 1 error

 

I've tried installing the @babel/plugin-transform-classes to babel config following these steps. Error persists.

I've also tried changing how the PixiPlugin.registerPIXI is implemented from the docs. Error persists.

import { gsap } from "gsap";

import { PixiPlugin } from "gsap/PixiPlugin";

import { DisplayObject } from "@pixi/display";

import { BlurFilter } from "@pixi/filter-blur";

import { ColorMatrixFilter } from "@pixi/filter-color-matrix";

 

gsap.registerPlugin(PixiPlugin);

PixiPlugin.registerPIXI({

  DisplayObject: DisplayObject,

  Graphics: Graphics,

  filters: {

      BlurFilter: BlurFilter,

      ColorMatrixFilter: ColorMatrixFilter

  }

});

 

 

Any help here would be greatly appreciated, hopefully I've included enough details.

 

Cheers!

[GSAP Helper]

Hm, that error seems to be totally unrelated to GSAP or PixiPlugin. The message itself is flagging code/files that aren't part of GSAP.

 

It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Angus13]

Hey @GSAP Helper, thanks for the response. Running the code within a demo works fine because, as you mentioned, the error isn't caused by gsap or pixi but is coming from my cra build (webpack error). I'm hoping someone using gsap & pixi within a cra app has come across this before. More of a cra/webpack/babel question but I'm hoping it's okay to post here as it's caused by trying to use the gsap pixiPlugin.

[Angus13]

I've just downgraded pixi.js to version 6.5.7 and this seems to have done the trick! Pixi updated to version 7.x.x in October, possible the gsap plugin hasn't been updated to work with this and cra/webpack?

[GreenSock]

Yeah, I see what you mean. That's definitely a Pixi/Webpack/babel/bundler question that's unrelated to GSAP (as you said). Please do let us know if you discover a workaround so that you can use Pixi.js 7+

 

For me, the error was thrown as soon as I imported PIXI (totally not connected to GSAP).