1

Currently facing an issue while integrating my reactJS component having input type="text" in salesforce lightning component.

I build applications/components using Angular/ReactJS,So I am fairly new to salesforce development.

Code is working fine in IE browser but not in FireFox and Chrome, I see an error in console saying "Cannot read property 'prototype' of undefined". If I remove the input element from the code it is working fine in all the browsers.

For more reference I have added a sample code with html input element below.

Lightning Component Code:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <ltng:require scripts="{!join(',', $Resource.React, $Resource.ReactDom, $Resource.SampleInput)}"/>
    <div aura:id="root" id="root"/>
</aura:component>

React Component Code:

import React, { Component } from 'react';
import ReactDom from 'react-dom';

export default class SampleInput extends React.Component{
constructor(props){
super(props);
}
render(){
return (<div><h3>ToDo</h3><input type='text' ref='todo'></input></div>);
}
}

ReactDom.render(<SampleInput />, document.getElementById("root"));

Currently I am clueless on why the above code is not working, So it will be very helpful if someone gives some insights on how to proceed further.

Note: I've added React and ReactDom scripts as static resources.

0

Use a lightning container component to wrap your index.html instead:

<aura:component>   
    <lightning:container src="{!$Resource.my_js_app + '/index.html'}"
        onmessage="{!c.handleMessage}"
        onerror="{!c.handleError}"/>
</aura:component>

References

| improve this answer | |

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.