score:1

I was facing the same problem. Using react-rails gem.

No console error, webpacker compiled successfully. Also helper was working good react_component('Home') cause I could see in the html

<div data-react-class="Home" data-react-props="{}"></div>

When installing the gem the following example was within:

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> 
// to the head of your layout file,
// like app/views/layouts/application.html.erb. 

// All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

Which was working good.

But the component is rendered when DOMContentLoaded event triggers. So the component was rendered by the client.

Anyways, reading the documentation found prerender

prerender: true to render the component on the server.

So using =react_component("Home", {}, {prerender: true}) worked to me.


Related Query

More Query from same tag