Forum Discussion

Brass Contributor

Feb 26, 2019

Solved

How To: Include a script in my web part

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

FedericoPorceddu82
Feb 26, 2019
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

mc1052

Copper Contributor

Sep 25, 2019

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

FedericoPorceddu82

MVP

Sep 25, 2019

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

mc1052
Copper Contributor
Sep 25, 2019
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 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