2

I know there is several posts on that, but they does not answer the below question. I have built a small POC to integrate react into LWC, I have used lwc-react-webpack-demo as a start base, and was able to create the React todo list example inside an LWC. I wanted to expand my POC to something a little bit bigger like the following template, I was able to bundle it with webpack but when loading it into the LWC I am getting the following error:

Cannot read property 'importScripts' of undefined [Cannot read property 'importScripts' of undefined]

I have debugged the issue and find out it fails here:

if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";

Since "g" is undefined:

/******/    /* webpack/runtime/global */
/******/    !function() {
/******/        __webpack_require__.g = (function() {
/******/            if (typeof globalThis === 'object') return globalThis;
/******/            try {
/******/                return this || new Function('return this')();
/******/            } catch (e) {
/******/                if (typeof window === 'object') return window;
/******/            }
/******/        })();
/******/    }();

I assume it's because of the shadow DOM? or/and the fact that webpack is generating several files (not like the small example where I have only one bundle js file) and it's trying to import them?

Any ideas on how to solve it? or maybe the best approach here is to go with the Visualforce approach (lightning:container might work as well, but I don't like the iframe approach)?

LWC:

import { LightningElement } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import REACT_TEMPLATE from "@salesforce/resourceUrl/reacttemplate";

export default class ReactTemplateContainer extends LightningElement {
  connectedCallback() {
    loadScript(this, REACT_TEMPLATE)
      .then(() => {
        mount(this.template.querySelector("div"), {});
      })
      .catch((error) => {
        console.error("LOAD SCRIPT ERROR::", error);
      });
  }
}
GoldenAxe
  • 838
  • 3
  • 9
  • 26

0 Answers0