GSAP MorphSVGPlugin not found NextJS

[Ishan Shishodiya]

import gsap from "gsap";
import MorphSVGPlugin from "gsap/dist/MorphSVGPlugin";
gsap.registerPlugin(MorphSVGPlugin);

I have the above code written in a NextJS project, but am getting the error -

Module not found: Can't resolve 'gsap/dist/MorphSVGPlugin'

I saw in one forum post that this error was occurring because MorphSVGPlugin is a Club GreenSock plugin, so instead tried importing it from `gsap-trial` instead of `gsap` but still had the same error. What can be done here?

[mvaneijgen]

Have you tried changing the import statement when moving to gsap-trial? These packages are limited to where you can use them, but if you're only working locally you should be fine to test all the Club GreenSock packages out for free! Check out more info over at https://www.npmjs.com/package/gsap-trial. Hope it helps and happy tweening! 

 

import gsap from "gsap-trial";
import MorphSVGPlugin from "gsap-trial/MorphSVGPlugin";

// Or UMD imports
import gsap from "gsap-trial/dist/gsap";
import MorphSVGPlugin from "gsap-trial/dist/MorphSVGPlugin";

[Rodrigo]

Hi,

 

On top of @mvaneijgen great advice, please take a look at this NextJS starter template using the GSAP Trial package:

https://stackblitz.com/edit/nextjs-efumgr?file=pages%2F_app.js

 

Also if you normally work in React/NextJS we have these collections so you can create minimal demos when/if you run into any issues:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Hopefully this helps.

Happy Tweening!