Using GSAP with TypeScript

[DJ1]

I am trying to use GSAP in a project with React 15.4.2 and TypeScript 3.7.2 

 

I did the following: npm i gsap --save

Then I did this in my .tsx file: 

 

import * as T from 'gsap

I then built the project, but am getting these errors: 

 

Error - typescript - node_modules\gsap\types\gsap-utils.d.ts(97,75): error TS1144: '{' or ';' expected.

 

So I was reading through these forums, and I did the following: 

 

npm install @types/greensock

But that didn't work. 

I tried the following too: 

 

import gsap from "gsap";

That doesn't work as well. 

 

What am I doing wrong here? I can't find a step by step guidance to how to set things up with npm based projects, sometimes forums say import * as something from 'gsap' sometimes it's import gsap from 'gsap'. Can anyone guide me here?

 

P.S: 

 

Here's my tsconfig.json: 

 

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  }
}

Thanks. 

 

 

[ZachSaucier]

Hey DJ1 and welcome to the GreenSock forums!

 

10 hours ago, DJ1 said:

npm install @types/greensock

GSAP 3 now has official Typescript definitions bundled with GSAP so don't install third party ones. They are most likely incompatible with GSAP 3+.

 

10 hours ago, DJ1 said:

tried the following too: 

 

import gsap from "gsap";

That doesn't work as well. 

I believe this is the correct format. Can you try with a fresh project and see if you can get it to work? What errors is it throwing?

 

We do have an install helper that you can use: https://greensock.com/docs/v3/Installation#esModules

In it, we recommend using the bracket form of importing so that it keeps the same syntax if you're loading multiple things from "gsap". But either should work.

[OSUblake]

11 hours ago, DJ1 said:

So I was reading through these forums, and I did the following: 

 

npm install @types/greensock

 

You should definitely uninstall those. Those types are not compatible with v3.

 

11 hours ago, DJ1 said:

I then built the project, but am getting these errors: 

 

Error - typescript - node_modules\gsap\types\gsap-utils.d.ts(97,75): error TS1144: '{' or ';' expected.

 

It sounds like you might be using an old version of TypeScript, like here.

 

 

11 hours ago, DJ1 said:

and TypeScript 3.7.2 

 

That version should be fine, but maybe that version isn't being used to actually compile your code. Depending on your setup, you might need to install TypeScript globally.

 

npm install -g typescript

 

11 hours ago, DJ1 said:

What am I doing wrong here? I can't find a step by step guidance to how to set things up with npm based projects, sometimes forums say import * as something from 'gsap' sometimes it's import gsap from 'gsap'. Can anyone guide me here?

 

Don't do import * as anymore. That was needed a long time ago for older versions of TypeScript and GSAP. Always check the dates on forum posts. A lot of stuff has changed since v3 came out several months ago.

 

Just import like Zach linked to here.

https://greensock.com/docs/v3/Installation#esModules