React-rails: Rails view cannot find component

[radovsky]

Help us help you! Please choose one:

• [ ] My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• [x] My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [ ] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• [ ] I have another issue to discuss.

---

I've been using Rails for a while but am new to React. I'm having issues just getting a component to render, and finding a paucity of information online about my specific problem. I'm not even sure if a GH issue is the right place for this, but it's easy to provide a link to the repo for context here. The JS error I'm getting in the console is:

react_ujs_mount.self-169a668….js?body=1:84 Uncaught Error: Cannot find component: 'Company'. Make sure your component is globally available to render.
    at Object.mountComponents (react_ujs_mount.self-169a668….js?body=1:84)
    at HTMLDocument.<anonymous> (react_ujs_turbolinks.self-19cb50a….js?body=1:5)
    at HTMLDocument.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
    at HTMLDocument.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)
    at Object.t.dispatch (turbolinks.self-c5acd7a….js?body=1:6)
    at r.t.Controller.r.notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a….js?body=1:6)
    at r.t.Controller.r.pageLoaded (turbolinks.self-c5acd7a….js?body=1:6)
    at turbolinks.self-c5acd7a….js?body=1:6

I have the following code in app/assets/javascripts/components/company.js.jsx (I thought it may have been a namespacing issue so I nested the component file inside directories to match the controller/view files, with no luck):

import React from 'react';

export default class Company extends React.Component {
  render() {
    return (<h1>hey</h1>);
  }
}

And this in app/views/api/v1/companies/index.html.erb (the view which is rendered by the root route):

<%= react_component 'Company', { data: @companies } %>

Here is the repo url: https://github.com/radovsky/JobMapper

[akshaymohite]

@radovsky can you try with

class Company extends React.Component {
  render() {
    return (<h1>hey</h1>);
  }
}

instead?

[radovsky]

@akshaymohite that did it, it was actually throwing an error on the require/import all along. Thanks!

[akshaymohite]

👍

[Arpanbhalla]

@akshaymohite thanks this worked for me too could you tell how is it different from
var Company = React.createClass({ render: function() { return ( <h1>Hey</h1> ) } });

The above code is not working for me

[lyonsun]

I also would like to know why React.Component works, while React.createClass produces the following errors:

Uncaught TypeError: React.createClass is not a function
    at _main.self-09a4e07806daa1e3111519872c7e06726d7d2e456b3c838774b43b3c556ea070.js?body=1:2
[react-rails] Cannot find component: 'Main' for element <div data-react-class=​"Main" data-react-props=​"{}​">​</div>​
Uncaught Error: Cannot find component: 'Main'. Make sure your component is available to render.
    at Object.mountComponents (react_ujs.self-750257c3f8895c967701122460c257eb9b74575fc10ceafeb7f6d61383553386.js?body=1:320)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self-750257c3f8895c967701122460c257eb9b74575fc10ceafeb7f6d61383553386.js?body=1:357)

Thanks.

[BookOfGreg]

@lyonsun That's because React.createClass is no longer a thing in Reactv16:
https://reactjs.org/docs/react-without-es6.html

It was replaced with a separate module "create-react-class" that is only needed if you can't use React.Component

[Tectract]

class Company extends React.Component {
  render() {
    return (<h1>hey</h1>);
  }
}

How do I do this in js.cjsx coffeescript?

The top of my files currently looks like this:

# @cjsx React.DOM
@TopLogin = React.Component

I'm trying to update versions here but can't get anything to render...

[Tectract]

solution for me...

npm install --save create-react-class

createReactClass = window.createReactClass = global.createReactClass = require 'create-react-class' (in application.js.coffee)

change React.Component to createReactClass at the top of every js.csjx component...