SyntaxError: Unexpected token 'export' on NPM import

[Duo]

Hi,

 

I'm a member of the GreenSock club and successfully downloaded and installed GSAP 3.0 and bonus plugins using the gsap-bonus.tgz method with YARN. I'm now trying to import the DrawSVGPLugin but it's throwing errors in my Terminal and then also in my browser.

 

This is the setup in my main app index.js:

 

import 'dom4'
import 'svgxuse'
import domready from 'domready'
import { gsap } from 'gsap'
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin.js'
import Swup from 'swup'
import SwupBodyClassPlugin from '@swup/body-class-plugin'
import SwupJsPlugin from '@swup/js-plugin'
import GlobalHeader from '../global-header'
import ProjectGallery from '../our-work/project-gallery'
import Contact from '../contact'
import GlobalFooter from '../global-footer'
import ScrollBtn from '../scroll-btn'
import InView from '../in-view'

gsap.registerPlugin(DrawSVGPlugin)

This is the error that is showing in my Terminal:

 

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: keyword (var) [./~/gsap/DrawSVGPlugin.js:208,0]

And this is the console error in my browser (Chrome):

Uncaught SyntaxError: Unexpected token 'export'

I can see the plugin inside the node_modules/gsap folder.

 

I'm also running [email protected]

 

Any help would be greatly appreciated.

 

Thanks,

Dayne

[GreenSock]

It definitely sounds like an issue in your build system. Perhaps your setup doesn't understand ES Modules? If that's the case, then just import the ES5 UMD files from the /dist/ directory like:

import { gsap } from 'gsap/dist/gsap.js'
import { DrawSVGPlugin } from 'gsap/dist/DrawSVGPlugin.js'

Does that help? 

[Duo]

Thanks so much for getting back to me. That method worked perfectly.

[FlyingZipper]

I had this problem with Nuxt.js, and by adding :

build: {
  transpile: ['gsap']
}

in my nuxt.config.js file it worked correctly.

[Muzammil hasan]

Importing UMD files like this, is throwing TypeScript error.

 

[Cassie]

Sorry Muzammil is that a question?

If so could you elaborate a bit?

[GreenSock]

We do provide TypeScript definition files for the ES Modules. Perhaps you need to point your build system to those? I'm not much of a TypeScript expert, sorry.