SOLVED

How To: Include a script in my web part

%3CLINGO-SUB%20id%3D%22lingo-sub-357255%22%20slang%3D%22en-US%22%3EHow%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357255%22%20slang%3D%22en-US%22%3E%3CP%3EI%20want%20to%20include%20the%20following%20JavaScript%20in%20my%20web%20part%3A%3C%2FP%3E%3CP%3E%3CA%20target%3D%22_blank%22%20rel%3D%22noopener%22%3Ehttps%3A%2F%2Fwww.gstatic.com%2Fcharts%2Floader.js%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20okay%20with%20adding%20it%20as%20a%20link%20in%20the%20head%20(using%20script%20tags).%20I%20am%20also%20open%20to%20downloading%20the%20JavaScript%20and%20adding%20it%20to%20my%20project%20source%20so%20that%20it%20is%20bundled%20with%20the%20web%20part%20when%20I%20install%20it.%3C%2FP%3E%3CP%3EWhich%20is%20the%20best%20practice%3F%20How%20do%20I%20do%20each%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357900%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357900%22%20slang%3D%22en-US%22%3Eyou're%20welcome%20%3A)%3C%2Fimg%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357896%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357896%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%20Federico.%20Very%20help%20and%20good%20find%20with%20the%20GitHub%20project%20that%20uses%20the%20Google%20charts.%20Thanks.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357303%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357303%22%20slang%3D%22en-US%22%3E%3CP%3Ehi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F288947%22%20target%3D%22_blank%22%3E%40smithme%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eif%20you%20see%20the%20GitHub%20link%20that%20I%20posted%2C%20you%20can%20find%20this%20configuration%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3Econfig%2Fconfig.json%3C%2FSTRONG%3E%3C%2FP%3E%3CPRE%3E%22externals%22%3A%20%7B%0A%20%20%20%20%22google%22%3A%20%7B%0A%20%20%20%20%20%20%22path%22%3A%20%22https%3A%2F%2Fwww.gstatic.com%2Fcharts%2Floader.js%22%2C%0A%20%20%20%20%20%20%22globalName%22%3A%20%22google%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%3C%2FPRE%3E%3CP%3E%3CSTRONG%3E%3CFONT%20color%3D%22%2324292e%22%20face%3D%22Segoe%20UI%22%3Egoogle.d.ts%3C%2FFONT%3E%3C%2FSTRONG%3E%20under%20src%2Ftyping%2F%3C%2FP%3E%3CPRE%3Edeclare%20module%20%22google%22%20%7B%0A%20%20%20%20interface%20IGoogle%20%7B%0A%20%20%20%20%20%20%20%20charts%3A%20any%3B%0A%20%20%20%20%20%20%20%20visualization%3A%20any%3B%0A%20%20%20%20%7D%0A%20%20%20%20var%20google%3A%20IGoogle%3B%0A%20%20%20%20export%20%3D%20google%3B%0A%7D%3C%2FPRE%3E%3CP%3Eand%20in%20your%20ts%20webpart%3C%2FP%3E%3CPRE%3Eimport%20*%20as%20google%20from%20'google'%3B%3C%2FPRE%3E%3CP%3Eand%20then%20you%20can%20use%20in%20this%20way%20i.e.%26nbsp%3B%3CA%20title%3D%22https%3A%2F%2Fgithub.com%2FAJIXuMuK%2Fissues%2Fblob%2Fmaster%2Fgoogle-charts%2Fsrc%2Fwebparts%2FhelloWorld%2FHelloWorldWebPart.ts%22%20href%3D%22https%3A%2F%2Fgithub.com%2FAJIXuMuK%2Fissues%2Fblob%2Fmaster%2Fgoogle-charts%2Fsrc%2Fwebparts%2FhelloWorld%2FHelloWorldWebPart.ts%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%3CSPAN%3Ehttps%3A%2F%2Fgithub.com%2FAJIXuMuK%2Fissues%2Fblob%2Fmaster%2Fgoogle-charts%2Fsrc%2Fwebparts%2FhelloWorld%2FHelloWorldWebPart.ts%3C%2FSPAN%3E%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ECheers%2C%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EFederico%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357297%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357297%22%20slang%3D%22en-US%22%3E%3CP%3EI%20hope%20I%20did%20this%20right.%20I%20added%20the%20following%20to%20my%20config%2Fconfig.json%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CBLOCKQUOTE%3E%3CDIV%3E%22externals%22%3CSPAN%3E%3A%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%22charts%22%3A%20%7B%3C%2FDIV%3E%3CDIV%3E%22path%22%3A%20%3CA%20href%3D%22https%3A%2F%2Fwww.gstatic.com%2Fcharts%2Floader.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.gstatic.com%2Fcharts%2Floader.js%3C%2FA%3E%2C%3C%2FDIV%3E%3CDIV%3E%22globalName%22%3A%20%22charts%22%3C%2FDIV%3E%3CDIV%3E%7D%3C%2FDIV%3E%3CDIV%3E%7D%2C%3C%2FDIV%3E%3C%2FBLOCKQUOTE%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ethen%20I%20added%20to%20my%20PieChartWebpart.ts%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CBLOCKQUOTE%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3Echarts%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'charts'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FBLOCKQUOTE%3E%3CDIV%3E%3CSPAN%3EI%20am%20currently%20getting%20and%20error%20on%20the%20'charts'%20portion%20of%20that%20line.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EAm%20I%20doing%20this%20right%3F%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357265%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357265%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F288947%22%20target%3D%22_blank%22%3E%40smithme%3C%2FA%3E%20%2C%3C%2FP%3E%3CP%3Eyou%20can%20find%20best%20practics%20to%20add%20external%20libraries%20to%20spfx%20webpart%20here%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fbasics%2Fadd-an-external-library%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fbasics%2Fadd-an-external-library%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETalking%20about%20gstatic%2C%20if%20you%20are%20using%20plain%20Javascript%2C%20and%20not%20React%2C%20%3CSPAN%3Eas%20per%20documentation%2C%20you%20need%20to%20reference%20external%20non-AMD%20module.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EHere%20you%20can%20find%20a%20sample%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FAJIXuMuK%2Fissues%2Ftree%2Fmaster%2Fgoogle-charts%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FAJIXuMuK%2Fissues%2Ftree%2Fmaster%2Fgoogle-charts%3C%2FA%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ECheers%2C%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EFederico%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-873900%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-873900%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F138334%22%20target%3D%22_blank%22%3E%40Federico%20Porceddu%3C%2FA%3E%26nbsp%3B%20-%20Hi%20Fererico%20-%20sorrry%20to%20bother%20but%20i'v%20been%20searching%20for%20a%20solution%20for%20this%20problem%20all%20over%20the%20net%20and%20your%20assistance%20above%20means%20hopefully%20you%20know%20what%20could%20be%20my%20problem.%3C%2FP%3E%3CP%3EI%20have%20tried%20to%20get%20gsap%20animation%20library%20working%20in%20my%20webpart%20via%20cdn%20%3CA%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20get%20it%20loaded%20via%20the%20config.json%3A%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%22externals%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22TweenMax%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22path%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22%3CA%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%3C%2FA%3E%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22globalName%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22TweenMax%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3E...%20and%20importing%20in%20the%20.ts%20file%3A%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E*%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Eas%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3ETweenMax%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E'TweenMax'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3Ebut%20when%20i%20try%20to%20reference%20it%20in%20the%20render%20function%20as%20i%20should%20e.g%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETweenMax.to(%24('.domclassname')%2C2%2C%7Bopacity%3A%200%7D)%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethe%20build%20fails%20with%20code%20error%202%20-%20as%20says%20that%20TweenMax%20is%20not%20defined.%3C%2FP%3E%3CP%3EIs%20there%20some%20declaration%20i%20am%20missing%20here%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eregards%3C%2FP%3E%3CP%3EMark%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-873978%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-873978%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F414782%22%20target%3D%22_blank%22%3E%40mc1052%3C%2FA%3E%26nbsp%3Bdid%20you%20install%26nbsp%3B%3CSPAN%3Etype%20definitions%20for%20GSAP%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3Enpm%20install%20--save%20%40types%2Fgsap%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CH1%20id%3D%22toc-hId-1960385702%22%20id%3D%22toc-hId-1960385702%22%20id%3D%22toc-hId-1960385702%22%20id%3D%22toc-hId-1960385702%22%20id%3D%22toc-hId-1960385702%22%20id%3D%22toc-hId-1960385702%22%3E%26nbsp%3B%3C%2FH1%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-873988%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-873988%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F138334%22%20target%3D%22_blank%22%3E%40Federico%20Porceddu%3C%2FA%3E%26nbsp%3B-%20hi%20yes%20-%20i%20used%3A%26nbsp%3B%3CSPAN%3Enpm%20install%20--save%20%40types%2Fgsap%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-873989%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-873989%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F138334%22%20target%3D%22_blank%22%3E%40Federico%20Porceddu%3C%2FA%3E%26nbsp%3B-%20i%20also%20tried%20using%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3ETweenMax%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3Eany%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Erequire%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'TweenMax'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ein%20the%20.ts%20file%20-%20when%20i%20do%20that%20i%20get%20no%20errors%20on%20the%20build%20but%20i%20still%20cant%20use%20it%20in%20the%20render%20function%20it%20gives%20me%20%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EUncaught%20(in%20promise)%20TypeError%3A%20TweenMax.to%20is%20not%20a%20function%3CBR%20%2F%3Eat%20LeanLikeAStartupLandingPageWebPart..%2Flib%2Fwebparts%2FleanLikeAStartupLandingPage%2FLeanLikeAStartupLandingPageWebPart.js.LeanLikeAStartupLandingPageWebPart.render%20(LeanLikeAStartupLandingPageWebPart.ts%3A607)%3CBR%20%2F%3Eat%20LeanLikeAStartupLandingPageWebPart..%2Fsp-webpart-base.js.__WEBPACK_AMD_DEFINE_RESULT__..%2Flib%2Fcore%2FBaseClientSideWebPart.js.BaseClientSideWebPart._renderWithAccessibleTitle%20(sp-webpart-base_en-us.js%3A1772)%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-874016%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-874016%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F414782%22%20target%3D%22_blank%22%3E%40mc1052%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ecould%20you%20please%20try%20the%20following%20in%20config.json%20%3F%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22str%22%3E%22externals%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%7B%3C%2FSPAN%3E%0A%3CSPAN%20class%3D%22str%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22TweenMax%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22%3CA%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%3C%2FA%3E%22%3C%2FSPAN%3E%3CBR%20%2F%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFollowing%20the%20docs%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fbasics%2Fadd-an-external-library%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fbasics%2Fadd-an-external-library%20%3C%2FA%3E%26nbsp%3BI%20think%20you%20are%20trying%20to%20merge%20non-AMD%20Module%20procedure%20with%20cdn%20procedure.%3C%2FP%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-874343%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Include%20a%20script%20in%20my%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-874343%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F138334%22%20target%3D%22_blank%22%3E%40Federico%20Porceddu%3C%2FA%3E%26nbsp%3B-%20Hi%20thanks%20for%20the%20response.%3C%2FP%3E%3CP%3EI%20tried%20running%20it%20as%20cdn%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E1.%20%3CSPAN%3Enpm%26nbsp%3Binstall%26nbsp%3Bgsap%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E(%3CA%20href%3D%22https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fgsap%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fgsap%3C%2FA%3E%26nbsp%3B)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E2.%20config.json%20add%20external%20library%3A%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%22externals%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22jquery%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22%3CA%20href%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.4.1.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcode.jquery.com%2Fjquery-3.4.1.min.js%3C%2FA%3E%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22gsap%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22%3CA%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgsap%2F2.1.3%2FTweenMax.min.js%3C%2FA%3E%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E3.%20.ts%20import%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E*%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Eas%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3ETweenMax%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22gsap%2FTweenMax%22%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E*%20getting%20this%20far%20using%20the%20above%20it%20builds%20without%20error%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E4.%20add%20some%20test%20code%20to%20the%20render%20function%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Epublic%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%26nbsp%3B%20%26nbsp%3B%3CSPAN%3ETweenMax%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eto%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%24%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'.distinctclassnamehere'%3C%2FSPAN%3E%3CSPAN%3E)%2C%3C%2FSPAN%3E%3CSPAN%3E1%3C%2FSPAN%3E%3CSPAN%3E%2C%7B%3C%2FSPAN%3E%3CSPAN%3EautoAlpha%3A%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E0%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3CSPAN%3EonComplete%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Efunction%3C%2FSPAN%3E%3CSPAN%3E()%7B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Ealert%3C%2FSPAN%3E%3CSPAN%3E()%7D%7D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EWhen%20i%20run%20this%20after%20step%204%20it%20give%20an%20error%20message%20in%20the%20browser%20console%20indicating%20that%20it%20cant%20find%20the%20.to%20function%20in%20tweenmax.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EError%20message%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3EUncaught%20(in%20promise)%20TypeError%3A%20gsap_TweenMax__WEBPACK_IMPORTED_MODULE_5__.to%20is%20not%20a%20function%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ethis%20should%20be%20fairly%20simple%20but%20i%20cant%20get%20it%20working%20.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eregards%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Emark%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I want to include the following JavaScript in my web part:

https://www.gstatic.com/charts/loader.js

 

I am okay with adding it as a link in the head (using script tags). I am also open to downloading the JavaScript and adding it to my project source so that it is bundled with the web part when I install it.

Which is the best practice? How do I do each?

11 Replies
Highlighted
Best Response confirmed by Juan Carlos González Martín (MVP)
Solution

Hi @smithme ,

you can find best practics to add external libraries to spfx webpart here https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library

 

Talking about gstatic, if you are using plain Javascript, and not React, as per documentation, you need to reference external non-AMD module.

 

Here you can find a sample https://github.com/AJIXuMuK/issues/tree/master/google-charts

 

Cheers,

Federico

Highlighted

I hope I did this right. I added the following to my config/config.json:

 

"externals": {
"charts": {
"globalName": "charts"
}
},
 
then I added to my PieChartWebpart.ts:
import * as charts from 'charts';
I am currently getting and error on the 'charts' portion of that line.
 
Am I doing this right?
 
 

 

 

Highlighted

hi @smithme 

if you see the GitHub link that I posted, you can find this configuration:

 

config/config.json

"externals": {
    "google": {
      "path": "https://www.gstatic.com/charts/loader.js",
      "globalName": "google"
    }
  },

google.d.ts under src/typing/

declare module "google" {
    interface IGoogle {
        charts: any;
        visualization: any;
    }
    var google: IGoogle;
    export = google;
}

and in your ts webpart

import * as google from 'google';

and then you can use in this way i.e. https://github.com/AJIXuMuK/issues/blob/master/google-charts/src/webparts/helloWorld/HelloWorldWebPa...

 

Cheers,

Federico

Highlighted

Thank you Federico. Very help and good find with the GitHub project that uses the Google charts. Thanks.

 

Highlighted
you're welcome :)
Highlighted

@Federico Porceddu  - Hi Fererico - sorrry to bother but i'v been searching for a solution for this problem all over the net and your assistance above means hopefully you know what could be my problem.

I have tried to get gsap animation library working in my webpart via cdn https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js

 

I get it loaded via the config.json:

"externals": {
    "TweenMax": {
      "globalName""TweenMax"
    }
  }
 

... and importing in the .ts file:

import * as TweenMax from 'TweenMax';
 

but when i try to reference it in the render function as i should e.g:

 

TweenMax.to($('.domclassname'),2,{opacity: 0});

 

the build fails with code error 2 - as says that TweenMax is not defined.

Is there some declaration i am missing here?

 

regards

Mark

 

 

 

Highlighted

Hi@mc1052 did you install type definitions for GSAP?

 

npm install --save @types/gsap

 

Cheers,

Federico

Highlighted

@Federico Porceddu - hi yes - i used: npm install --save @types/gsap

Highlighted

@Federico Porceddu - i also tried using 

var TweenMax:any = require('TweenMax');
in the .ts file - when i do that i get no errors on the build but i still cant use it in the render function it gives me :
 
Uncaught (in promise) TypeError: TweenMax.to is not a function
at LeanLikeAStartupLandingPageWebPart../lib/webparts/leanLikeAStartupLandingPage/LeanLikeAStartupLandingPageWebPart.js.LeanLikeAStartupLandingPageWebPart.render (LeanLikeAStartupLandingPageWebPart.ts:607)
at LeanLikeAStartupLandingPageWebPart../sp-webpart-base.js.__WEBPACK_AMD_DEFINE_RESULT__../lib/core/BaseClientSideWebPart.js.BaseClientSideWebPart._renderWithAccessibleTitle (sp-webpart-base_en-us.js:1772)
Highlighted

Hi @mc1052 

could you please try the following in config.json ?

"externals": {
  "TweenMax""https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
}

 

Following the docs https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library  I think you are trying to merge non-AMD Module procedure with cdn procedure.

Cheers,

Federico

Highlighted

@Federico Porceddu - Hi thanks for the response.

I tried running it as cdn:

 

1. npm install gsap

(https://www.npmjs.com/package/gsap )

 

2. config.json add external library:

"externals": {
  }
 
3. .ts import:
import * as TweenMax from "gsap/TweenMax";
 
* getting this far using the above it builds without error
 
4. add some test code to the render function:
public render(): void {
   TweenMax.to($('.distinctclassnamehere'),1,{autoAlpha: 0,onComplete: function(){ alert()}});
}
When i run this after step 4 it give an error message in the browser console indicating that it cant find the .to function in tweenmax.
Error message: Uncaught (in promise) TypeError: gsap_TweenMax__WEBPACK_IMPORTED_MODULE_5__.to is not a function
 
this should be fairly simple but i cant get it working .
 
regards
mark