gsap.utils import issue

[yurbas]

Hello. I can't figure out, in all my old projects gsap.utils imports fine

 

But now i can't import gsap properly. For example fresh created application npm create vite@latest app-name --template react-ts 

npm i gsap, then i get this:

 

What I miss?

 

[yurbas]

If i remove import {gsap} from 'gsap', function becomes "accessable", but anyway get gsap is not defined in runtime. How it's even possible?

[Cassie]

Hi there!

 

It seems odd that you're mixing up /dist/ and straight up imports. Maybe you're using something which doesn't allow ES Modules? Some SSR frameworks like Nuxt/Next need UMD files from the dist directory.
 

// UMD files / Common JS
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

// ES Modules
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

Is unresolved variable a typescript error? looks like it? If so I can't help there much I'm afraid but maybe someone else can jump in.

• If you log out gsap and gsap.utils to the console what do you get?

 

Quote

in all my old projects gsap.utils imports fine

• What do you mean by imports fine, no type errors?
• What's the difference between your old projects and this one? Set up? Versions?

[yurbas]

 

Quote

 

Is unresolved variable a typescript error? looks like it? If so I can't help there much I'm afraid but maybe someone else can jump in.

• If you log out gsap and gsap.utils to the console what do you get?

 

 

Yes it's definitely typescript error. Console.log shows value. 

 

Quote

What's the difference between your old projects and this one? Set up? Versions?

The problem occured with vite build tool with default react-typescript template. All my other builds(webpack, create-react-app,vite-react-js, next) works fine

[Cassie]

Maybe head over to the typescript community to ask them?

https://discord.com/invite/typescript

As the issue is only with typescript and a specific vite/react starter I'm not entirely sure what we can do to help. Sorry about that.

[Rodrigo]

Hi,

 

This is a bit odd. I just created a React TS app on my local machine and replicated it on Stackblitz without any issues or linting errors/warnings. There are a few on Stackblitz, but with the exact same config files I see nothing in my local environment. I made a production build and ran it on my local server without any issues.

 

https://stackblitz.com/edit/vitejs-vite-phmgws?file=src%2FApp.tsx&terminal=dev

 

The only thing is that you should check your versions of node and npm, since you're using this as a build command:

npm create vite@latest app-name --template react-ts

Per the Vite docs:

# npm 6.x
npm create vite@latest my-app --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-app -- --template react-ts

If you're have npm 7+ and the corresponding node version, maybe you're instantiating your app with the wrong command.

 

Hopefully this helps.

Happy Tweening!

[yurbas]

12 hours ago, Rodrigo said:

 

# npm 6.x
npm create vite@latest my-app --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-app -- --template react-ts

 

Unfortunately, doesn't help. But anyway thank you. Obviously it's my typescript settings something i missing