Not able to load a third party Library on Lightning Web Component

Question

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.

Answer 1

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);
});

Answer 2

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.