Search code examples
javascripttypescripteslintgsap

Eslint throwing "Parsing error: Unexpected token" while using TypeScript

I installed @types/greensock and started using gsap with TypeScript. Everything works fine, but the ScrollTo plugin is giving this eslint error (image attached). Does someone know something about it?

Here is the eslint error:

enter image description here

Here is my .eslintrc:

{
  "extends": "eslint:recommended",
  "parser": "babel-eslint",
  "env": {
    "node": true,
    "es6": true,
    "browser": true
  }
}

Here is my code:

import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { gsap } from "gsap";
gsap.registerPlugin(ScrollToPlugin);

export const headerInteractionHandler = () => {
  document.querySelector("header .logo").addEventListener("click", (e) => {
    e.preventDefault();
    let element = <HTMLAnchorElement>e.currentTarget;

    gsap.to(window, {
      duration: 0.8,
      scrollTo: `${element.getAttribute("data-destination")}`,
    });
  });
};
Solution

  • I have been told on the GreenSock forum that I shouldn't be using @types/greensock as gsap has built-in support for TypeScript. So I deleted it, and I updated my .eslintrc by replacing babel-eslint with @typescript-eslint/parser like below, and the problem is gone.

    Needed installs:

    npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

    .eslintrc:

    {
  
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}