Bonus Plugins not loading

[danboyle8637]

I just renewed today so I'm not sure this has something to do with it... but my bonus plugins are not loading.

 

I'm using NextJS (newest version), React. 

I am using Typescript as well and I noticed the DrawSVGPlugin was a JS file.

 

import { gsap } from 'gsap'
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'

const MyComponent = () => {

  // I tried this outside the component as well as...
  // And in a useEffect that runs when the component mounts.
  gsap.registerPlugin(DrawSVGPlugin)
  
  useEffect(() => {
  	tl.to(element, {
    	drawSVG: '0% 100%'
    })
  }, [])

}

I am getting the following error It's attached. 

[GreenSock]

Hm, that message typically means you're using ES Modules in an older environment that doesn't support them. Maybe try importing the UMD versions of the GSAP files which are pretty universally compatible - those are tucked in the /dist/ directory:

 

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

Does that work better for you? 

 

If not, it'd be super helpful if you could post a reduced test case that reproduces the issue. We'd love to help. 

[danboyle8637]

@GreenSock Yes that seemed to work. 

 

Strange since the base gsap works fine. I'll keep messing around but thank you for your help!

[OSUblake]

19 minutes ago, danboyle8637 said:

Strange since the base gsap works fine.

 

Even though you didn't tell it to, your setup was actually loading from gsap/dist/gsap. 

 

Whenever you see something related to cjs (CommonJS), that means you should use the dist files.