SPFx Web Part: Loading Dependent Scripts

Question

I'm using the instructions here to load a library dependent on jQuery that is being served from my dev site. My config.json looks like:

{
  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "my-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/myWebPart/myWebPart.js",
          "manifest": "./src/webparts/myWebPart/myWebPart.manifest.json"
        }
      ]
    }
  },
  "externals": {
     "jquery": { 
       "path": "node_modules/jquery/dist/jquery.min.js",
       "globalName": "jquery"
     },
     "myLibrary": {
        "path": "//mySite.sharepoint.com/sites/develop_apps/Assets/myLibrary.js",
        "globalName": "myLibrary",
        "globalDependencies": ["jquery"]
   }
 },
 "localizedResources": {
    "myWebPartStrings": "lib/webparts/myWebPart/loc/{locale}.js"
 }
}

When I try:

import jquery = require("jquery");
require("myLibrary");

or:

import * as jQuery from "jquery";
require("myLibrary");

I get in the browser Cannot find module "myLibrary"

I know the path is correct. If I opt instead for:

SPComponentLoader.loadScript("//mySite.sharepoint.com/sites/develop_apps/Assets/myLibrary.js");

I get jQuery is not defined

What is the right way to load a library that dependency on jQuery from my site?

Answer 1

I figured it out. Instead of:

import * as jQuery from "jquery";
require("myLibrary");

Use:

import * as jQuery from "jquery";
var myLibrary: any = require("myLibrary");