How To: Include a script in my web part

Brass Contributor

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


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 VI_Migration (Silver Contributor)

Hi @smithme ,

you can find best practics to add external libraries to spfx webpart here


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




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:



"externals": {
    "google": {
      "path": "",
      "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.




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


I get it loaded via the config.json:

"externals": {
    "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:$('.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?







Hi@mc1052 did you install type definitions for GSAP?


npm install --save @types/gsap




@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: 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": {


Following the docs  I think you are trying to merge non-AMD Module procedure with cdn procedure.



@Federico Porceddu - Hi thanks for the response.

I tried running it as cdn:


1. npm install 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 {$('.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: is not a function
this should be fairly simple but i cant get it working .