React component not rendering when using react-rails gem

Question

I followed the 'Getting started with webpacker' in react-rails but on running the rails server I dont see the hello world component there.

app/javascript/components/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MyApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

views/home/index.html.erb

<!DOCTYPE html>
    <html>
        <body>
            <p>Heloo</p>
            <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
        </body>
    </html>

app/javascript/packs/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

This is what I get when I try to access the webpage

EDIT: Adding prerender: true (server-side rendering) in view, it works perfectly

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, prerender: true) %>

but why wont client side rendering work?

Could you try call `ReactRailsUJS.mountComponents` in console? Let me know if it works. — barmic, Mar 07 '19 at 07:13
@barmic I dont even get the 'Hello World from Webpacker' print from the application.js — Anto Joy, Mar 11 '19 at 06:04

score 3 · Answer 1 · answered Oct 27 '19 at 09:11

3

try adding

 <%= javascript_pack_tag 'application' %>

in your index.html.erb

answered Oct 27 '19 at 09:11

Realizt30

173
2
12

score 0 · Answer 2 · answered May 12 '19 at 14:10

This issue is related to how your view is set up.

Your view is rendering a full HTML doc and ignoring the layout, therefore the JavaScript is not loaded on the page at all. This explains why everything will be undefined on the window.

In your screenshot in the question you can see the HTML HEAD is empty. Replace the view with the following.

views/home/index.html.erb

<p>Heloo</p>
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

Also ensure that your layout file is rendering correctly by putting something visible temporarily in it. You could temporarily put the view content into the template to ensure both things at once!

Hope this helps.

React component not rendering when using react-rails gem

2 Answers2