Typescript/gulp/browserify: 'import' and 'export' may appear only with 'sourceType: module'

Viewed 31

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.

0 Answers
Related