I'm building a project that's using Typescript, Gulp, Browserify, PIXI and GSAP. I have a gulp task that's bundling the files together:
module.exports.bundleTS = function(callback){
console.log("Bundling typescript files...");
return browserify({
basedir: ".",
debug: true,
entries: ["src/js/main.ts"],
cache: {},
packageCache: {},
})
.plugin(tsify)
.plugin(realpathify)
.transform("babelify",
{
presets: ["@babel/preset-env"],
sourceMaps: true,
extensions: [".ts", ".js"],
})
.bundle()
.pipe(source("main.js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("dist"));
};
Here's my tsconfig also -
{
"compilerOptions": {
"target": "es5",
"esModuleInterop": true
},
"exclude": [
"node_modules"
]
}
Together these work fine for my purposes, but I'm trying to use the GSAP PixiPlugin and this is where my issue arises.
In my file, Renderer.ts -
import * as PIXI from "pixi.js";
import { gsap } from "gsap";
import PixiPlugin from "gsap/PixiPlugin";
export class Renderer
{
protected create()
{
gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI(PIXI);
// other code logic
}
}
If I remove the pixi plugin from this I don't have any errors with other node modules I'm using such as PIXI, jQuery and gsap itself, but this plugin specifically gives me this error when running my gulp task:
...path\to\node_modules\gsap\PixiPlugin.js:370
export var PixiPlugin = {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Any advice on what I'm missing here would be appreciated, as I have searched for quite a while for a resolution to this but haven't found anything.