react.createElement is not a function LWC

Question

I am getting the below error when using react js in LWC. Any idea how to resolve this.

afterRender threw an error in 'c:razorpay' [c.createElement is not a function]

JS

import {
    LightningElement,
    track
} from 'lwc';
import razorpaycheckout from '@salesforce/resourceUrl/razorpay';
import react from '@salesforce/resourceUrl/react';
import reactdom from '@salesforce/resourceUrl/reactdom';
import babel from '@salesforce/resourceUrl/babel';
import jq from '@salesforce/resourceUrl/jquery';

import { loadScript } from 'lightning/platformResourceLoader';
import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';

export default class Razorpay extends LightningElement {

    constructor(){
    super();

    }

    connectedCallback() {
    loadScript(this, react);
    loadScript(this, reactdom);
    loadScript(this, babel);
    loadScript(this, jq);
    reactdom.render(react.createElement('div', null, 'Hello React'), this.template.querySelector('div'));
    }
    showSuccessMessage() { // call back method 
        this.successMessage = 'Scripts are loaded successfully!!';
        alert('Scripts are loaded successfully!!!');
    }


}

Answer 1

The loadScript function returns a promise. When the javascript interpreter hits your react.createElement call, the promise has not been resolved yet.

You'll need to convert to the code to something like:

Promise.all([
    loadScript(this, react),
    loadScript(this, reactdom),
    loadScript(this, babel),
    loadScript(this, jq),
]).then(() => {
    reactdom.render(react.createElement(.....));
});