Forum Discussion
How To: Include a script in my web part
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
FedericoPorceddu82 - 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:
... and importing in the .ts file:
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
FedericoPorceddu82 - 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)FedericoPorceddu82 - hi yes - i used: npm install --save @types/gsap
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
FedericoPorceddu82 - 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": {"jquery": "https://code.jquery.com/jquery-3.4.1.min.js","gsap": "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"}3. .ts import:import * as TweenMax from "gsap/TweenMax";* getting this far using the above it builds without error4. 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 functionthis should be fairly simple but i cant get it working .regardsmark