Loading dependent JS files (e.g. JQuery Plugins) into SPFx Solution in right order

Today I want to show you quick solution how you could load multiple dependent JS files into your SPFx Solution (in my example SPFx Web Part) in right order.

Lets imagine that we have to make simple Weather SPFx Web Part. We decided to use JQuery plugin named SimpleWeather which is based / it depends on JQuery. If you want your Web Part to work normally at each loading time you have to take care on loading order of your external JS script files.

So we have to include this two script files into our SPFx Web Part solution:

• jquery-2.1.1.min.js
• jquery.simpleWeather.min.js

Firstly you have to include it as external scripts into config.json SPFx config file:

"externals": {
    "jquery": {
      "path": "https://code.jquery.com/jquery-2.1.1.min.js",
      "globalName": "jQuery"
    },
    "simpleWeather": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
      "globalName": "jQuery",
      "globalDependencies": [ "jquery" ]
    }
}

After that you could use ES6 import or require() statement:

import * as jQuery from 'jquery'; 
require('simpleWeather');

In theory this should work. But not always. In some cases could be jquery.simpleWeather.min.js loaded faster than jquery-2.1.1.min.js file because JS files are loaded / imported simultaneously.

So, example above is not good.
You have to take care of loading order. This should be done by example below which is better solution:

SPComponentLoader.loadScript('https://code.jquery.com/jquery-2.1.1.min.js', {
  globalExportsName: 'jQuery'
}).then(($: any) => {
  this.jQuery = $;
  SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js', {
    globalExportsName: 'jQuery'
  }).then(() => {
    // after all JS files are successfully loaded
    // ...
  });
});

In code above we use SPComponentLoader from @microsoft/sp-loader module which works on SharePoint 2016 on-prem too.

import { SPComponentLoader } from '@microsoft/sp-loader';

If you are not limited with SharePoint 2016 on-prem you could use ModuleLoader instead:

import ModuleLoader from '@microsoft/sp-module-loader';

 

Cheers!
Gašper Rupnik

{End.}