Jump to content
GreenSock

MarkusJackson

'Object is not extensible' when switching to TypeScript?

Recommended Posts

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

Link to comment
Share on other sites

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".

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×