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
– barmic, Commented Mar 7, 2019 at 7:13
@barmic I dont even get the 'Hello World from Webpacker' print from the application.js — Anto Joy
– Anto Joy, Commented Mar 11, 2019 at 6:04

Realizt30 · Accepted Answer · 2019-10-27 09:11:41Z

3

try adding

 <%= javascript_pack_tag 'application' %>

in your index.html.erb

answered Oct 27, 2019 at 9:11

Realizt30

1833 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BookOfGreg · Accepted Answer · 2019-05-12 14:10:00Z

0

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.

answered May 12, 2019 at 14:10

BookOfGreg

3,7342 gold badges46 silver badges58 bronze badges

Collectives™ on Stack Overflow

React component not rendering when using react-rails gem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related