SOLVED

How To: Include a script in my web part

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

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?
 
 

 

 

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

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

 

you're welcome :)

@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

 

 

 

Hi@mc1052 did you install type definitions for GSAP?

 

npm install --save @types/gsap

 

Cheers,

Federico

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

@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)

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

@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