0

I am using react-rails to use React.js on my Rails project. Rails 4.2.8

This is what my assets/javascripts/application.js looks like

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap/modal
//= require react_ujs
//= require turbolinks

I am using HAMl for view and importing the Component like this :

= react_component('HelloWorld', name: 'John', prerender: true)

And when I do View PageSource I can see something like this :

    <div data-react-class="HelloWorld" data-react-props="{&quot;name&quot;:&quot;John&quot;,
&quot;prerender&quot;:true}"></div>

But There is nothing on the View and I am seeing this error message on the Console:

Uncaught ReferenceError: HelloWorld is not defined
    at eval (eval at module.exports (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:95), <anonymous>:1:1)
    at Object.module.exports [as getConstructor] (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:95)
    at Object.mountComponents (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:303)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:350)

The component file app/JavaScripts/components/HelloWorld.js

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

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

What am I doing wrong ? Is it because I don't have //= require components ? Even on that case I was getting an error.

Sandip Subedi
  • 1,039
  • 1
  • 14
  • 34
  • Did you see the following issue? And, if you change HelloWord.js name with HelloWorld.js, maybe fix. https://github.com/reactjs/react-rails/issues/702 – Hamdi Bayhan Feb 19 '18 at 20:06
  • @hamdi Yes, in my case all the file is `HelloWorld.js` and class is `HelloWorld` and I am adding react_component as `Hello World.` I had typo above and I fixed it. – Sandip Subedi Feb 19 '18 at 20:22
  • Could you try after remove the `prerender: true` option? – Hamdi Bayhan Feb 19 '18 at 20:40
  • I still get the same error. This is my first time using React on Rails. I have seen that other people have `app/assets/javascripts/component.js`. I don't have that. Do you think that might be an issue ? – Sandip Subedi Feb 19 '18 at 20:59
  • I think not. I am using react on rails but with react-on-rails gem not react-rails gem. I think we are missing something little. – Hamdi Bayhan Feb 19 '18 at 21:08

1 Answers1

0

Move HelloWorld.js from app/JavaScripts/components to app/assets/javascripts/components and see if that helps.

Shishir Pande
  • 11
  • 4