import third party JS library in open source LWC

Question

After wasting significant amount of time on how to import jQuery, I got below 2 ways in HTML with local path or CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

IN JS with local path or CDN:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

But unfortunately both of the above methods won't work in LWC and there is no documentation available on how to do the same.

Below approach works fine in my index.html page to import jQuery in my lwc project.

<script src="./resources/js/jquery-3.5.1.min.js"></script>

I also wasted so many hour on how to import CSS in lwc as there is no documentation available on importing third party CSS also but some how I manged to import css by using below code

constructor() {

    super();

    const styles = document.createElement('link');
    styles.href = './resources/css/bootstrap.css';
    styles.rel = 'stylesheet';
    this.template.appendChild(styles);
}

So I tried some similar approach to import JS and this doesn't give any errors at the console log but the same doesn't work at all, tried in both constructor and connectedCallback but no luck.

connectedCallback() {
        const jq = document.createElement('SCRIPT');
        jq.src = './resources/js/jquery-3.5.1.min.js';
        jq.type = 'text/javascript';
        this.template.appendChild(jq);
    }

if anyone has any idea about how to import the JS library in open source LWC then please do let me know, would highly appreciate your help.

Answer 1

Consider the open source LWC recipes

1. First you need to install jQuery in lwc web-app using npm install jquery. OR any other library you want to use. After installation, you will see the file in node_modules folder

2. Now, you just need to get that library variable wherever you need. Note that although you can use jquery, you cannot identify the elements directly. i.e., you cannot use jQuery('p'), instead you should use jq(this.template.querySelector('p')).

Below is the example from hello world in same sample recipes:

hello.html:

<template>
    
    <button onclick={hide}>Hide</button>
    <button onclick={show}>Show</button>
    
    <p>If you click on the "Hide" button, I will disappear.</p>
    
    <ui-card title="Hello">
        <div>
            Hello, {greeting}!
        </div>

        <recipe-view-source source="recipe/hello" slot="footer">
            Bind an HTML element to a component property.
        </recipe-view-source>
    </ui-card>
</template>

hello.js:

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    greeting = 'World';
    
    connectedCallback(){
        window.jq = require('jQuery');
    }

    hide(){
        jq(this.template.querySelector('p')).hide();
    }

    show(){
        jq(this.template.querySelector('p')).show();
    }
}

As many libraries use $ as default, I just tend to use jq for jquery.

Output: