Extending jQuery in SPFx Web Part

Question

I've used the jQuery plugin jOrgChart with success in a SharePoint add-in by simply referencing the file and making the call, i.e.

<script type="text/javascript" src="jquery.jOrgChart.js"></script>
...
jQuery(document).ready(function() {
    $("#org").jOrgChart();
});

Now I want to use the same plugin in a SPFx webpart. What have is:

import * as jQuery from "jquery";
import "jqueryui";
import "jorgchart";
//  also tried with the same result:
//  require("jorgchart");
...
let jOrgChart:any = require("./Scripts/jOrgChart.js");
...
jQuery("#org").jOrgChart({ chartElement: "#chart", dragAndDrop: false });

my json.config file includes:

"externals": {
"jquery": { 
    "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js",
    "globalName": "jquery"
},
"jqueryui":{
    "path": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js",
    "globalName": "jquery",
    "globalDependencies": ["jquery"]
},
"jorgchart": {
    "path": "./Scripts/jOrgChart.js",
    "globalName": "jquery",
    "globalDependencies": ["jqueryui"]
}
},

but I get the build TypeScript error: Property 'jOrgChart' does not exist on type 'JQuery'. Is it something with the way the jOrgChart.js code is written?

Full code is here.

What am I missing?

Answer 1

Add "declare var $;" Replace "jQuery("#org").jOrgChart()" with "$("#org").jOrgChart()"

Answer 2

You need to first ensure that jQuery is loaded and after that your plugin is loaded.

One way to fix it would be to add an external reference in the config.json file.

So, go to the config > config.json file and modify the externals section as below. Modify as per your path/folder structure. Just ensure that the file is accessible to end users:

 //standard code 
"externals": {
    // standard entries omitted for brevity
    "jquery": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js",
      "globalName": "jquery"
    },
    "jqueryui":{
        "path": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js",
        "globalName": "jquery"
        "globalDependencies": ["jquery"]
    }
    "jOrgChart": {
      "path": "https://tenant.sharepoint.com/sites/test/MyDocLib/Scripts/jOrgChart.js",
      "globalName": "jquery",
      "globalDependencies": ["jqueryui"]
    }
  },
 //standard code

Once done, go to your webpart typescript file and add the references as:

import * as jQuery from 'jquery';
require('jqueryui');
require('jOrgChart');

After that you can call your jQuery("#org").jOrgChart method in either render method or any other custom method that you are using something like:

public render(): void {
    this.domElement.innerHTML = "<your html content>";

    jQuery(document).ready(function() { 
        jQuery("#org").jOrgChart({ chartElement: "#chart", dragAndDrop: false });
    });    
}

Reference - Add jQueryUI to your webpart

Update as per comments -

I see that you are using the drag and drop functionality. According to jQuery Org Chart plugin, if you need to use the drag-drop, then you need to add additional dependency on jQuery UI as well. So, first load the files in the order as jQuery > jQueryUI > jQueryOrgChart