How to import a third party JavaScript library (UIkit) into a SharePoint SPFx web part?

Question

Short Version

I want to know the correct way to import UIkit into a SharePoint SPFx web part.

I can successfully import jQuery like this:

In config.json, I specify the link to the library:

"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"

I import the relevant ‘types’:

npm install --save-dev @types/jquery

In my_web_part.ts, I import the library and then use it:

import * as $ from 'jquery';

// .....

Hello, jQuery!

$('#jquery-test').text('jQuery is working!');

But when I try and import UIkit in the same way, ie:

In config.json:

"uikit": "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/js/uikit.min.js",
"uikit-icons": "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/js/uikit-icons.min.js"

Import the relevant ‘types’:

npm install --save-dev @types/uikit

In my_web_part.ts:


import * as UIkit from 'uikit';

// ...

the result is that:

the UIkit functionality does not work.

If I try and reference UIkit explicity like this, I can see that UIkit is not available:

UIkit.slider('#my_slider')

It is like UIKit is not even imported into the file.

Long Version

I have followed the instructions here:

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library#load-a-script-from-a-cdn

My config.json file looks like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "my-custom-html-interface-web-part-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/myCustomHtmlInterfaceWebPart/MyCustomHtmlInterfaceWebPartWebPart.js",
          "manifest": "./src/webparts/myCustomHtmlInterfaceWebPart/MyCustomHtmlInterfaceWebPartWebPart.manifest.json"
        }
      ]
    }
  },
"externals": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js",
    "uikit": "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/js/uikit.min.js",
    "uikit-icons": "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/js/uikit-icons.min.js"
  },
  "localizedResources": {
    "MyCustomHtmlInterfaceWebPartWebPartStrings": "lib/webparts/myCustomHtmlInterfaceWebPart/loc/{locale}.js"
  }
}

I have installed the required 'types':

npm install --save-dev @types/jquery
npm install --save-dev @types/uikit

This is one of the many versions of code I have tried in my 'webpart.ts' file:


/* eslint-disable */

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as $ from 'jquery';
import * as UIkit from 'uikit';

export default class MyCustomHtmlInterfaceWebPart extends BaseClientSideWebPart<{}> {
  public render(): void {
    this.domElement.innerHTML = `
      Hello, jQuery!
      
      
        
          
        
      
    `;

    // jQuery usage
    $('#jquery-test').text('jQuery is working!');


    if (UIkit) {
      // UIkit usage
      (UIkit as any).slider('#my_slider', {})
      console.log("THIS IS GOOD");
    }
    else {
      console.log("THIS IS BAD"); // <-- this is logged, because it can't find UIkit  
    }
  }
}

I am new to SharePoint SPFx, TypeScript and ESLint so I am not clear what and where the actual problem is.

I created the project like this:

yo @microsoft/sharepoint

And answered the prompts like this:

Solution Name: MyWebpartName 
Client-side component: WebPart 
Web part name: MyWebpartName 
Framework: No framework

My package.json looks like this:

{
  "name": "my-custom-html-interface-web-part",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-component-base": "1.19.0",
    "@microsoft/sp-core-library": "1.19.0",
    "@microsoft/sp-lodash-subset": "1.19.0",
    "@microsoft/sp-office-ui-fabric-core": "1.19.0",
    "@microsoft/sp-property-pane": "1.19.0",
    "@microsoft/sp-webpart-base": "1.19.0",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/eslint-config-spfx": "1.20.1",
    "@microsoft/eslint-plugin-spfx": "1.20.1",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "1.20.1",
    "@microsoft/sp-module-interfaces": "1.20.1",
    "@rushstack/eslint-config": "2.5.1",
    "@types/jquery": "^3.5.30",
    "@types/uikit": "^3.14.5",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "gulp": "4.0.2",
    "typescript": "4.7.4"
  }
}

I use nvm with Node version 18.17.1.

I have checked the SPFx/Node compatability chart here and all looks OK:

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility

I use these commands to build and test in workbench:

gulp clean
gulp bundle --ship
gulp package-solution --ship
gulp serve --nobrowser

And then I go to this URL to access the workbench:

https://.sharepoint.com/_layouts/15/workbench.aspx

where the tenant uses SharePoint Online.

(The workbench behaviour seems really slow, buggy and inconsistent. I am not sure how often the workbench is being refreshed and there are always lots of errors in the chrome dev tools console, even before I add my webpart there).

Other References:

Add an external library to your SharePoint client-side web part
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library

Use existing JavaScript libraries in SharePoint Framework client-side web parts
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/use-existing-javascript-libraries

How to import a third party JavaScript library (UIkit) into a SharePoint SPFx web part?

Answers (1)

Related Questions