None of my React Components are loading inside of my html.erb files

0
votes

I have this error in my browser dev tools "Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated," which I suspect may be the issue. I also suspect that installing babel may have messed up my react-rendering, or possible the fact that I removed all my npm packages. Inside of the body tags on the browser, I have < div data react-class="Home"> < /div>, but nothing shows up on the page. I'm using react-rails gem.

Inside my root html.erb file < %= react_component ('Home') % >

My Home Component

class Home extends React.Component {

render() {

return() < div>

< h1> Hello < /h1>

< /div>

}

Inside my application.js

//= require jquery

//= require jquery_ujs

//= require react

//= require react_ujs

//= require components

//= require_tree .

Inside my components.js

//= require_tree ./components

2
ruby-on-railsreactjs
Can you please add some actual code, like the js file and template file that has the react hook in it - finalfreq
Well hang on, there is an error stating Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. Did this appear at point of writing your render()? Make sure you're exporting as well with export default at the start of your class. - Dandy
There might be some errors in your code, but it's hard to tell because it's not formatted and I'm not sure if anything was lost when pasting. this markdown guide could help. - tompave
@Dandy- I believe export default is for a standalone React App, not react-rails. Also, The Calling Element.createShadowRoot() error is not caused by render(), I commented it out, and it is still there. -tompave - I didn't lose anything when pasting I believe. - Nico

2 Answers

0
votes

your return statement isn't correct, try:

  render() {
    return ( 
      <div>   
        <h1>Hello</h1>
      </div>
    )
  }

Don't forget to delete the space in your html tags right after "<".

0
votes

There is problem in your render code. It must look like this :-

return ( the tags and html part will come here );

So after correction it will look like this :- (dont forget ; too)

render()
{
        return(
        < div>
        < h1> Hello < /h1>
        < /div>
        );
}