hrism

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 |

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