Module resolution issue with Next.js

[fandy]

I'm getting this error when using the morph plugin:

./components/Logo/index.tsx:3:0
Module not found: Can't resolve 'gsap/MorphSVGPlugin'
  1 | import { useEffect } from "react";
  2 | import gsap from "gsap";
> 3 | import MorphSVGPlugin from "gsap/MorphSVGPlugin";
  4 | import SVG from "react-inlinesvg";
  5 | 
  6 | export const Logo = () => {

Here is how I'm using the library:

import { useEffect } from "react";
import gsap from "gsap";
import MorphSVGPlugin from "gsap/MorphSVGPlugin";
import SVG from "react-inlinesvg";

export const Logo = () => {
  useEffect(() => {
    gsap.registerPlugin(MorphSVGPlugin);
    gsap.to("#chat-logo", { morphSVG: "#main-logo" });
  }, []);

  return (
    <>
      <SVG src="/branding/logo-chat.svg" id="chat-logo" />
      <SVG src="/branding/logo.svg" id="main-logo" />
    </>
  );
};

Any reason why this is the case? I can't for the life of me figure out why considering all the TS definitei

 

[OSUblake]

Welcome to forums, @fandy

 

The MorphSVGPlugin is included with Club Greensock, so it won't be part of the normal gsap package. The TS definitions include all the plugins because some users don't use modules to load plugins.

 

If you are a Club GreenSock member, you should import plugins from the dist folder because next.js doesn't support ES Modules.

import { MorphSVGPlugin } from "gsap/dist/MorphSVGPlugin";

 

EDIT: Looks like next.js add an experimental flag for ES Modules.

https://nextjs.org/blog/next-11-1#es-modules-support