0

There are many tutorials on adding 3rd party scripts in LWCs. I've tried adding this LWC in both the Salesforce dashboard and an Experience Cloud LWR site. It works on the dashboard, but breaks in Experience Cloud with the error: ReferenceError: $ is not defined at Proxy.greetingHandler

Can anyone help me to get this to work in Experience Cloud?

LWC: jquerytest.js

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import staticResource from "@salesforce/resourceUrl/myResource";

export default class Jquerytest extends LightningElement {
  renderedCallback() {
    console.log('jQuery:', staticResource  + '/vendor/jquery/jquery-3.7.0.min.js');
    loadScript(this, staticResource  + '/vendor/jquery/jquery-3.7.0.min.js').then(()=> {
      console.log('Jquery loaded');
    });
  }

  greetingHandler() {
      console.log($("p"));
      $(this.template.querySelector('p')).fadeIn();
  }
}

LWC: jquerytest.html

<template>

  <lightning-card title="jQueryDemo">
      <lightning-button variant="brand" label="Click Me" title="click Me" onclick={greetingHandler} slot="actions"></lightning-button>

      <p class="slds-p-horizontal_small" style="display:none;">
          Hey! Have an awesome day :)
      </p>
  </lightning-card>

</template>

LWC: jquerytest.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
  </targets>
</LightningComponentBundle>

My site's security configuration

1 Answer 1

0

I found my answer. I had to disable Lightning Locker for jQuery to run in Experience cloud.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .