Issues Loading External JS Library from CDN in a SharePoint Framework (SPFX) Web Part

Question

I have a pretty fundamental issue/question. I have been trying to load non-AMD script to my SharePoint Framework web part (trying to show a StatusPage widget on our SharePoint site). This definitely works using the Embed Modern Script web part which I have tested. But I wanted to create a widget web part on its own.

Anyways, I have looked at the following resources but I cannot find a way to get the reference on my page to work:

Microsoft's Documentation on loading non-AMD modules - this asks me to create a file.d.ts to declare the module. That isnt very helpful if the file is rather large.

Building SharePoint Framework Client Side Web Parts using jQuery by Waldek Mastykarz - its a great read, but it focuses on loading jQuery and a plugin that is non AMD. Still has dependency on jQuery.

Similar Question already on StackExchange - no responses yet.

I also looked through a bunch of other links but again, have not found a way through.

I have added a reference in the config.json file:

"externals": {
"jquery": "https://code.jquery.com/jquery-1.11.0.min.js",
"StatusPage": {
  "path": "https://cdn.statuspage.io/se-v2.js",
  "globalName": "StatusPage"
}

And I have added the following references in my webpart.ts file:

import * as $ from 'jquery';
import * as StatusPage from 'StatusPage';

I have tried variations using require etc. But that hasnt helped.

I have been searching through the net for quite some time and I can't believe I have not found an answer to this issue yet (or one that works for me). Maybe I have overlooked it already.

The error I get is:Error - typescript - src\webparts\systemStatus\SystemStatusWebPart.ts(12,29): error TS2307: Cannot find module 'StatusPage'

Answer 1

Your external entry is correct. However, you should reference it in your code like this:

var statuspage:any = require('StatusPage');