1

Im trying to mount a React-App build and complied through webpack on a Lightning Web component. when i use loadScript to load the bundled Js file, I get "Failed to load script at /resource/1588059730000/solution_console_react/main.chunk.js: regeneratorRuntime is not defined [regeneratorRuntime is not defined]".

Component.js

import { loadStyle, loadScript } from "lightning/platformResourceLoader";
import scStyles from "@salesforce/resourceUrl/solution_console_react_styles";
import scReact from "@salesforce/resourceUrl/solution_console_react";

export default class reactStaticResourceLoader extends LightningElement {
    connectedCallback() {
        Promise.all([
            loadStyle(this, scStyles + "/static/css/main.css"),
            loadScript(this, scReact + "/runtime-main.js"),
            loadScript(this, scReact + "/main.chunk.js"),
        ])
            .then(() => {
                console.log("scripts Loaded");
            })
            .catch((err) => {
                console.log(err);
            });
    }
}

main.css - Is the styles file runtime-main.js - it is the runtime script to load and run the react app main.chunk.js - the react app bundled to a single file using the webpack.

I need some help in loading these scripts on a LWC so that I can run my React app.

0

Looks like your 'main.chunk.js' script depends on your 'runtime-main.js'.

So Promise.all() accepts an iterable object of Promises (your array). Your problem is that Promises are asynchronous, meaning that it starts executing every one of the LoadScript() calls but waits until they're all returned to proceed.

This means that while you know when they are all finished, you don't know for sure the order they'll execute, thus if you need to ensure the load order, as you do, you should nest your calls to ensure the order is preserved like so:

Promise.all([
    loadStyle(this, scStyles + "/static/css/main.css"),
    loadScript(this, scReact + "/main.chunk.js"),
])
.then(() => {
    loadScript(this, scReact + "/runtime-main.js")
    .then(() => {
        console.log("scripts Loaded");
    })
    .catch((err) => {
        console.log(err);
    });
})
.catch((err) => {
    console.log(err);
});
1
  • That didnt work. If I import just the main.chunk.js file it works. Or If I just import runtime-main.js it works. But if I import that both. Even by order them in a promise then block it does not work. Not sure if I have to add some pollifills in my Webpack configs to remove this regeneration error. – Srinath Alagar Krishnan Apr 28 '20 at 15:40
0

Please check this answer. I was able to load my typescript/react app with the help of webpack. It should be configured in a way of compressing all the files to a single js file. And also maybe this react demo repository will be handy.

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.