2

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


}
1
0

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

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.