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.

1 Answer 1

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .