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!
