Sharepoint SPFX - external javascript loading issue

Question

I have followed the quick start and made a working hello world webpart.

I want to include the twitter widget, so I have followed the guide on adding external JavaScript, this is linked from git hub

I add the following to my config.json

"externals": {
  "widgets":"https://platform.twitter.com/widgets.js"
},

and I import with

import 'widgets';

But, I get the following error

***Failed to load component "ab3668f3-39a2-4b40-a307-a1bea4023df9" (TwitterWebPart).
Original error: ***Failed to load URL 'https://platform.twitter.com/widgets.js' for resource 'widgets' in component 'ab3668f3-39a2-4b40-a307-a1bea4023df9' (TwitterWebPart). There was a network problem.
This may be a problem with a HTTPS certificate. Make sure you have the right certificate.

The url https://platform.twitter.com/widgets.js works fine.

score 1 · Accepted Answer · edited Oct 19 '17 at 11:53

Looks like there are 2 issues here.

This may be a problem with a HTTPS certificate. - this error looks to be from twitter's end and we can't do anything about it.

Secondly, the widgets.js is non-AMD. So, you need to load it a bit differently.

Reference - Loading a non-AMD module

To fix these issues , I downloaded the https://platform.twitter.com/widgets.js file locally and added it in another folder.

After that, I modified the config.json as below:

"externals": {    
      "widgets": {
          "path": "scripts/widgets.js",
          "globalName": "twttr"
      }  
  },

Here, I created a folder named scripts at the root of the solution and added the js file there.

Modify your import statement and add replace it as below:

require("widgets");

As content is injected into the page, your twitter feed will not show, add the follow code to load your tweets

public constructor() {
  super();
  let w= require("widgets");
  setTimeout( () => w.widgets.load(), 0);
}

My folder structure is as below:

Now, run gulp serve, it will work correctly.

Sharepoint SPFX - external javascript loading issue

1 Answers1