React-Rails Cannot read property 'render' of undefined

Question

I am just installing React-Rails gem into my project and i've been configuring a little more to be able to use import's in javascript using Browserify.

I have a component in a view which I am calling in my components file and making it global.

global.CompanyDashboard = require('components/Company/CompanyDashboard' ).default;

The component is very very simple:

export default class CompanyDashboard extends React.Component {
    render() {
      return (
        <p>hello</p>
      )
    }
}

I am calling it in my view like so:

<%= react_component("CompanyDashboard") %>

When the page loads I get the error Cannot read property 'render' of undefined which I can't figure out the reason for. I go into my DOM in the browser and I can physically see the react component in the DOM but for some reason it's not rendering. Would love someone to point me in some sort of direction. I've been banging my head for a few hours reconfiguring and configuring again React in the project.

Thanks

score 0 · Answer 1 · answered Oct 11 '17 at 03:03

I wasn't including ReactDOM in my application.js which was causing the issue.

I now have my application.js file set up like this:

window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');
require( 'jquery-ujs' );
require( 'fetch' );
require( './components' );

React-Rails Cannot read property 'render' of undefined

1 Answers1