[Unable to compile tsx file containing DrawSVGPlugin]

Cassie-san
Thank you for letting me know.
I immediately became a member as you suggested.
I also changed the code to the one you described, and the "Uncaught ReferenceError" on the console is no longer displayed, but the following error has not been resolved.
Is there a lack of description in Interface, etc.?

 

ERROR in src/components/PathAnimation.tsx:13:13
TS2322: Type 'number' is not assignable to type 'BooleanValue | DrawSVGTarget | undefined'.
    11 |             duration: 1,
    12 |             stagger: 0.1,
  > 13 |             drawSVG: 0,
       |             ^^^^^^^
    14 |         });
    15 |     }, [])
    16 |

 

[Unable to compile tsx file containing DrawSVGPlugin]

Nice to meet you.

I registered as a member of Greensock to use DrawSVGPlugin.
So I went to the dashboard and followed the instructions in the "Yarn" section of the "Module Installation Token".
I then read through the DrawSVGPlugin API documentation and added descriptions to my tsx file according to its contents.

However, when I executed the "Yarn start" command, I got the following error, and I am struggling to determine the cause and find a solution.
If you could please advise me, I would appreciate it.

 

From a junior front-end engineer and designer in Japan.

 

import { ReactElement, useEffect } from 'react'
import { gsap } from 'gsap'
const PathAnimation = (): ReactElement => {

    useEffect(() => {
        gsap.registerPlugin(DrawSVGPlugin)
        setAnimation()
    }, [])

    const setAnimation = () => {
        // https://greensock.com/docs/v3/Plugins/DrawSVGPlugin
        //draws all elements with the "draw-me" class applied with staggered start times 0.1 seconds apart
        gsap.from(".draw-me", {
            duration:1,
            stagger: 0.1,
            drawSVG: 0,
        });
    }
    return (
        <>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409 381" className="draw-me">
                <path fill="none" stroke="#000" strokeMiterlimit="10" strokeWidth="11" d="M6 6v200h306V92H181V6h223v272H6v98h401" />
            </svg>
        </>
    )
}


export default PathAnimation

Compiled with problems:X

ERROR in src/components/PathAnimation.tsx:16:13

TS2322: Type 'number' is not assignable to type 'BooleanValue | DrawSVGTarget | undefined'.
    14 |             duration:1,
    15 |             stagger: 0.1,
  > 16 |             drawSVG: 0,
       |             ^^^^^^^
    17 |         });
    18 |     }
    19 |     return (

Uncaught ReferenceError: DrawSVGPlugin is not defined
    at bundle.js:1719:59
    at invokePassiveEffectCreate (bundle.js:40732:24)
    at HTMLUnknownElement.callCallback (bundle.js:21348:18)
    at Object.invokeGuardedCallbackDev (bundle.js:21397:20)
    at invokeGuardedCallback (bundle.js:21457:35)
    at flushPassiveEffectsImpl (bundle.js:40814:13)
    at unstable_runWithPriority (bundle.js:48776:16)
    at runWithPriority$1 (bundle.js:28754:14)
    at flushPassiveEffects (bundle.js:40691:18)
    at bundle.js:40572:15
react-dom.development.js:20085 The above error occurred in the <PathAnimation> component:

    at PathAnimation (http://localhost:3000/gsap-study/static/js/bundle.js:1718:51)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
scheduler.development.js:171 Uncaught ReferenceError: DrawSVGPlugin is not defined
    at bundle.js:1719:59
    at invokePassiveEffectCreate (bundle.js:40732:24)
    at HTMLUnknownElement.callCallback (bundle.js:21348:18)
    at Object.invokeGuardedCallbackDev (bundle.js:21397:20)
    at invokeGuardedCallback (bundle.js:21457:35)
    at flushPassiveEffectsImpl (bundle.js:40814:13)
    at unstable_runWithPriority (bundle.js:48776:16)
    at runWithPriority$1 (bundle.js:28754:14)
    at flushPassiveEffects (bundle.js:40691:18)
    at bundle.js:40572:15

PS: I am not a paying member, is it possible that this plugin is only available to paying members in the first place? From my poor English reading and understanding, I was thinking that perhaps even free members can use it based on the regular process....