4

I'm trying out the Light DOM beta as I want to see how it will work with certain 3rd party libraries, but I cannot load a 3rd party javascript resource. I have the following component on a Salesforce (internal) record page:

// outer component - shadow dom
<template>
  <c-inner-component record-id={recordId}></c-inner-component>
</template>
// inner component - light dom
<template lwc:render-mode='light'>
  <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped print-target" >
  // ...
  </table>
</template>
// inner component js
import { LightningElement, api, wire, track } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import { NavigationMixin, CurrentPageReference } from "lightning/navigation";

export default class InnerComponent extends NavigationMixin(LightningElement) {
    static renderMode = 'light';
    @api recordId;

    // ...
}

Up to this point, everything is ok; the component loads and renders. Note that per the Light DOM docs, I have added lwc:render-mode='light' to my top-level template and static renderMode = 'light'; to my JS class. I also updated one use of this.template.querySelector to this.querySelector, but that's irrelevant to the issue, as that code never executes (it is triggered by a button). I have also wrapped my Light DOM component (inner-component) in a Shadow DOM component (outer component) as outlined in this knowledge article.

Now I want to load a 3rd party library which I have stored in a static resource. So I add this:

// before class declaration
import jsPdf from '@salesforce/resourceUrl/jspdf';

// inside class
    renderedCallback() {
        if (this.jsPdfInitialized) {
            return;
        }
        this.jsPdfInitialized = true;
        Promise.all([
            loadScript(this, jsPdf)
        ]);
    }

At which point, reloading the page gives the error

Invariant violation: Expected template to be an object

with the stack trace:

TypeError: Invariant violation: Expected template to be an object
    at Pf (https://orgname--orgname.lightning.force.com/auraFW/javascript/20g2uYzAuTpaB3EECmeKLg/aura_prod.js:65:64332)
    at tp (https://orgname--orgname.lightning.force.com/auraFW/javascript/20g2uYzAuTpaB3EECmeKLg/aura_prod.js:65:68175)
    at Ie.get [as template] (https://orgname--orgname.lightning.force.com/auraFW/javascript/20g2uYzAuTpaB3EECmeKLg/aura_prod.js:65:72525)
    at t (https://orgname--orgname.lightning.force.com/components/lightning/platformResourceLoader.js:1:191)
    at e.loadScript (https://orgname--orgname.lightning.force.com/components/lightning/platformResourceLoader.js:1:488)
    at Ie.renderedCallback (https://orgname--orgname.lightning.force.com/lightning/r/Account/0015a00002fPp7LAAS/modules/c/innerComponent.js:1:6574)
    at callHook (https://orgname--orgname.lightning.force.com/auraFW/javascript/20g2uYzAuTpaB3EECmeKLg/aura_prod.js:65:72035)
    at https://orgname--orgname.lightning.force.com/auraFW/javascript/20g2uYzAuTpaB3EECmeKLg/aura_prod.js:13:31075
    at ar (https://orgname--orgname.lightning.force.com/auraFW/javascript/20g2uYzAuTpaB3EECmeKLg/aura_prod.js:13:35571)
    at Po (https://orgname--orgname.lightning.force.com/auraFW/javascript/20g2uYzAuTpaB3EECmeKLg/aura_prod.js:13:31060)

I have tried changing which library I load (I have html2canvas stored as a static resource as well, as I may want to use it), but it doesn't matter. And note that no code is calling the loaded script; I'm just loading it. But I can find no way to load the library if Light DOM is enabled in my component.

3
  • I don't think light dom is really ready yet. Jun 23 at 21:56
  • 1
    @CasparHarmer So far I'd have to agree :) But that's what a Beta is for, and light dom is supposed to help "ease third-party integrations", so it seems like a valid test case. I'm hoping someone else has tried this. I may try a partner case as well. Jun 23 at 21:59
  • 1
    I tried to use it... I had several errors that seemed to have no resolution (I forget what they were). I've put aside for a bit. VS Code Plugin also unable to handle the light dom syntax in it's markup parser. At this point, I'd say it's really an alpha release. Jun 24 at 0:27

0

Your Answer

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

Browse other questions tagged or ask your own question.