2

I am trying to import react and react-dom js file from static resource. i have usded the below cdn to collect the js file into static resource

https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/cjs/react.production.min.js https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/cjs/react-dom.production.min.js

when i am importing react-dom js in LWC, its skipping below block. Any idea where i am doing wrong.

 Promise.all([
        loadScript(this, react),
        loadScript(this, reactdom),
    ]).then(() => { /* callback */
        this.error = undefined;
        this.showSuccessMessage();
        reactdom.render(react.createElement('div', null, `Hello React`), this.template.querySelector('react-root'));
    });

LWC -

import react from '@salesforce/resourceUrl/react';
import reactdom from '@salesforce/resourceUrl/reactdom';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';


    async connectedCallback() {
        //load react & react-dom
        Promise.all([
            loadScript(this, react),
            loadScript(this, reactdom),
        ]).then(() => { /* callback */
            this.error = undefined;
            this.showSuccessMessage();
            reactdom.render(react.createElement('div', null, `Hello React`), this.template.querySelector('react-root'));
        });
     }
4
  • So it's just not being called? What should be calling connectedCallback ? Aug 31, 2019 at 16:06
  • @PhilHawthorn connectedCallback is a Web Component standards method that is called when the component is first placed in the DOM. The framework itself (Aura) or the browser calls this method.
    – sfdcfox
    Sep 2, 2019 at 10:49
  • good to know, thanks for the insight @sfdcfox Sep 2, 2019 at 19:48
  • For some reason it does skip it with development version only while it is perfectly fine and working with the production minified version. Sep 3, 2019 at 1: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.