1

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.

14
  • LWC creates a shadow DOM that won’t play well with any library that manipulates the dom.
    – Kevan
    Aug 16 '20 at 12:26
  • in open source LWC also?
    – gs650x
    Aug 16 '20 at 12:27
  • in open source LWC you will need to include lwc:dom="manual".
    – Kevan
    Aug 16 '20 at 12:33
  • I am sorry, I am still not sure on how to import third party LWC in JS and where to mention lwc:dom="manual"
    – gs650x
    Aug 16 '20 at 12:35
  • Take a look at: lwc.dev/guide/javascript_third_party_library
    – Kevan
    Aug 16 '20 at 12:37
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: enter image description here

1
  • Thank you so much for your response on it, but still this didn't solve my real problem, I have started a new thread on where exactly jQuery is needed, would you please be kind to take a look to this new thread "salesforce.stackexchange.com/questions/316932/…"
    – gs650x
    Aug 17 '20 at 3:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.