'Object is not extensible' when switching to TypeScript?

[MarkusJackson]

I have a React App with a functional compoment where I use an little GSAP Animation.

Today I tried to migrate the App from vanilla JS to TypeScript and I started with that little Component:

 

interface Props {}

const Item1Content: React.FC<Props> = ({}) => {
  let centerLabel = useRef(null);

  const timeLine = useRef<TimelineLite | null>(null);

  useEffect(() => {
    timeLine.current = new TimelineLite({ paused: true });
    timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 });
  }, []);

  return (
    <>
      <CarouselItemWrapper
        backgroundImage={background}
        backgroundImageVerticalPosition={"bottom"}
      >
        <CenterLabel ref={centerLabel}>blupp blupp</CenterLabel>
      </CarouselItemWrapper>
    </>
  );
};

export default Item1Content;

 

The code works fine as .js file (there is actually a second useEffect that plays the animation. I deleted it for error search), but when I turn it to .tsx I get the following error in the browser:

TypeError: can't define property "_gsap": Object is not extensible

The cause is that line:

timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 })

So do I get that right? The TimeLineLite-Object that is referenced behind timeLine.current is not allowed to get add new properties, which the problem line is trying to do? The error was always there, but javascript just did not care and added the property anyways, but typescript is that strict that it tells me "no way, do it right!"? But how can I do it right?

 

Sorry, that there is no Codepen-Link.... I dont know how to demonstrate that TypeScript-only errors.

 

Thanks

[MarkusJackson]

Ok, I got it myself...I was that blind. It costs me hours to recognize that i have to use "centerLabel.current" instead of just "centerLabel".

[OSUblake]

You should switch to v3 syntax. There is no need to import TweenLite, TweenMax, TimelineLite, or TimelineMax.

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

 

 

import { gsap } from "gsap";

interface Props {}

const Item1Content: React.FC<Props> = ({}) => {
  let centerLabel = useRef(null);

  const timeLine = useRef<GSAPTimeline | null>(null);

  useEffect(() => {
    timeLine.current = gsap.timeline({ paused: true });
    timeLine.current.to(centerLabel.current, { opacity: 0.1, duration: 0.5 });
  }, []);

  return (
    <>
      <CarouselItemWrapper
        backgroundImage={background}
        backgroundImageVerticalPosition={"bottom"}
      >
        <CenterLabel ref={centerLabel}>blupp blupp</CenterLabel>
      </CarouselItemWrapper>
    </>
  );
};

export default Item1Content;

 

👆 And notice the GSAPTimeline type.