Greensock club member error building nextjs project

[JamesGrubb 10 Likes (Newbie)]

Hi, im have install gsap via npm following directions for greensock members using

npm install gsap@npm:@gsap/simply

I import it into my component
```

import drawSVG from 'gsap/DrawSVGPlugin';

gsap.registerPlugin(drawSVG);

```
An it seem to be working fine. When i push to git and build the project through Verce'ls hosting I get the following build error.
 

Module not found: Can't resolve 'gsap/DrawSVGPlugin' in '/vercel/path0/components/Hero'

 

Any ideas please

 

[OSUblake 18,474 Likes (Superhero)]

Hi James,

 

You might have to do 2 install commands, like here...

 

 

[JamesGrubb 10 Likes (Newbie)]

Hi thanks @OSUblake  tried that and got
`

Error: Command "npm install && npm install gsap@npm:@gsap/simply" exited with 1`

 

Do I have to include the .npmrc authToken?

 

[OSUblake 18,474 Likes (Superhero)]

Yes. The auth token is how it verifies your GSAP account.

 

Related thread...

 

 

[JamesGrubb 10 Likes (Newbie)]

Thank you. I watched all the video content and ended up downloading the tgz zip and installing. I presume i'm ok to upload this to my public repo?

[OSUblake 18,474 Likes (Superhero)]

We'd prefer you not as anyone could just snag that file. It would be better to make your repo private, or use .npmrc method. I don't have a good answer for on how to fix something works locally, but not on Vercel. It might be worth reaching out to them and seeing if they have a solution as it's their platform so they would have a better understanding of what the issue is.

 

Another related thread...

 

 

[johnchen 0 Likes (Newbie)]

I'm getting a similar error, just different output: 

 

SyntaxError: Cannot use import statement outside a module.

 

Tried the tgz method (also made sure that gitignore does not have .tgz), but i'm stuck. Any advice, please?

[johnchen 0 Likes (Newbie)]

import { useEffect, useRef } from "react";

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

gsap.registerPlugin(SplitText);

export default function HeroFadeText() {
  // Grab a reference to the component to split the text up.
  const heroText = useRef(null);

  useEffect(() => {}, []);
  return (
    <div>
      <p ref={heroText}></p>
    </div>
  );
}

 

[Cassie 5,115 Likes (Superhero)]

Hiya! Check out this thread -