Error building nextjs project - Greensock club member

[Guillaume P.]

Hi, 

 

I have install Gsap via NPM following directions for greensock members using (I'm greensock members :)/ also followed the video step by step : module install video 

 

As mentioned in various topics :  Next.js does not support ES Modules by default.  So I import UMD files from the dist folder.

;

 

But still I have this message when I npm run build :

 

 

and also an error message in Vercel : 

 

Any ideas please ?

Thank's

[GreenSock]

Your code shows that you're importing the module version of ScrollTrigger: 

// bad
import ScrollTrigger from "gsap/ScrollTrigger";

// good
import ScrollTrigger from "gsap/dist/ScrollTrigger";

 

[Guillaume P.]

Hi, 

Thank's for your reply.

I change the import bu I still have the error  : 

import ScrollTrigger from "gsap/dist/ScrollTrigger";

//also tried : 
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

I also add in tsconfig.js : 

{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}

 

 

 

[GreenSock]

That error message indicates that you've got code somewhere in your project that is indeed importing from "gsap/ScrollTrigger" instead of "gsap/dist/ScrollTrigger". It's very difficult for us to troubleshoot using only the info you're providing - we really need to be able to generate the problem ourselves and poke around. My guess is that you've got another file somewhere that's using the incorrect import path(s). 

[Rodrigo]

Hi Guillaume,

 

In fact Jack is right. You are importing ScrollTrigger directly from the ES modules in two components.

 

Check ScrollWrapper.tsx and Header.tsx in lines 4 and 5 respectively, you have this:

import { ScrollTrigger } from "gsap/ScrollTrigger";

 

Happy Tweening!

[Guillaume P.]

Hi Rodrigo,

Thank's for your help... I works !

I was focused on ScrollWrapper.tsx file and forgot header.tsx 

Thank's again.

[Guillaume P.]

Rodrigo,

Well, it works on local but when I tried to build on Vercel I still have this error.

ScrollSmoother is well in file \node_modules\gsap\dist\ScrollSmoother.js
An idea ?

 

 

[Rodrigo]

Hi Guillaume,

 

Please take a look at this thread, especially the last post I just published and let me know if that works.

 

[Guillaume P.]

Rodrigo,

I tried like this but it doesn't work : 

 

1/ Create an .npmrc file like this:

registry=https://npm.greensock.com
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=NPM_TOKEN
# //npm.greensock.com/:_authToken=${NPM_TOKEN}

2/ Create a .env.development.local file and add token + add it to .gitignore (.env*.local)

3/ Run npm install gsap@npm:@gsap/shockingl as mentionned in my account.

 

And I have this error : 

 

If put my token directly in .npmrc file, it works.

 

So, I dit it & Run npm install gsap@npm:@gsap/shockingl . It install in package .json : 

 

"dependencies": {

"@types/styled-components": "^5.1.26",

"gsap": "npm:@gsap/shockingly@^3.11.3",

 

then, I uncomment the final line in the .npmrc file and comment out the third line. 

Then, I push on github & add environment variable on Vercel.

 

I still have the same deploy error  on Vercel

 

[Rodrigo]

Hi Guillaume,

 

Sorry to hear that you're still having troubles.

 

I see that you're using npm run build for the deployment and not yarn. Any particular reason for that? How did you create your NextJS project? Installing each dependency by hand or using one of the build scripts recommended in the NextJS page?

https://nextjs.org/docs/getting-started#automatic-setup

 

I'm trying to create a repo installing the bonus files using NPM instead of Yarn and, even though it runs and builds correctly in my local machine, I can't seem to deploy it on Vercel or Netlify. I'm getting the following error:

error Couldn't find package "@next/swc-android-arm-eabi@12.3.1" required by "next@12.3.1" on the "npm" registry.

Also I get this warning about having yarn and npm lock files:

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

I don't know if using yarn is an option in your case, if possible try to install GSAP using Yarn add.

 

I'll ping @Prasanna hoping that he can provide more information on this subject.

 

Let us know about using yarn and if it solves your problems.

[Guillaume P.]

Hi Rodrigo,

I tried Yarn version (in general, I use to use npm) : https://github.com/devmrobot/AM_PROJECT-NEXT

It works on local but I got this error on Vercel :

 

 

and add Environnement variables : 

 

If I install gsap with Yarn Module Installation Token, I don't need to add gsap-bonus.tgz ?

Also weird the warning "Could not identify Next.js version" 

Thank's

[Rodrigo]

HI Guillaume,

 

Most likely this is related to the local installation being made with the .tgz file. If the repo is going to be private (and hopefully is) then using that file is no problem. I had issues with yarn and the private files from NPM and, since the repo is private, the bonus file was used in the end to just solve everything. But that was deployed in Netlify and not Vercel. In that case you shold leave the file in the repo and make it private so no one besides you can access and download it.

 

Also I assume that in your local environment you're still using NPM, right? The issue could be in the lock files or something like that. Honestly I'm not well versed in these flows to understand them correctly.

 

Can you please download and install this repo using just yarn in your local environment:

If you're going to use bonus .tgz file then there is no need to use the .npmrc file, just install the files using:

yarn add ./gsap-bonus.tgz

Then test that it works in your local environment. Then push it to a private repo and then try deploying it on Vercel.

 

I'll ping @Prasanna again so He can give us a hand with this.

 

Happy Tweening!

[Guillaume P.]

Rodrigo,

It works for me with Yarn. 

npm still not working on Vercel even if the npm run build work in local. 

Error in Vercel : Module not found: Can't resolve 'gsap/dist/ScrollSmoother' in '/vercel/path0/components'

[Rodrigo]

Hi Guillaume,

 

Based on your latest post I assume that you were able to deploy successfully to Vercel using Yarn, installing the bonus plugins without any issues, right? Please confirm that to be completely sure about it.

 

I'll ping @Prasanna so He can help us, unfortunately this is quite beyond my grasp.

 

I'll be waiting for your update.

 

Happy Tweening!

[Prasanna]

Hi @Guillaume P.,

It seems like the installation is successful but the import is not. Could you share with us the `package.json` file contents? (just the line containing  the gsap dependency is sufficient) to help us narrow down the problem.

 

Also, try running this command: `$ npm install gsap@npm:@gsap/member` - and the imports should work.

 

Prasanna

[Guillaume P.]

Hi Rodrigo, 

Right, I confirm it works for me on Vercel with Yarn. 

 

Hi Prasana and thank's for your help. My package.json on my npm repo

"gsap": "file:gsap-bonus.tgz",