React_on_rails: Can't get a component to display

[chintanparikh]

Hi -

I'll preface this by saying I'm new to Redux and Webpack so I could very well be doing something wrong there. My issue is that I can't get a simple component to display - the HelloWorld example works fine, so I know my setup is okay.

The following files are relevant:

client/app/bundles/Doxly/components/SignInForm.jsx

import React, { PropTypes } from 'react';
import _ from 'lodash';
import actions from '../actions/doxlyActions'

export default class SignInForm extends React.Component {
  static propTypes = {}

  constructor(props, context) {
    super(props, context);

    // Uses lodash to bind all methods to the context of the object instance, otherwise
    // the methods defined here would not refer to the component's class, not the component
    // instance itself.
    _.bindAll(this, 'handleSubmit');
  }

  handleSubmit(e) {

  }

  render() {
    return (
      <div className="panel panel-window">
        <form role="form" action>
          <div className="form-group">
            <label htmlFor="input-email">Email Address</label>
            <input type="email" name="email" id="input-email" className="form-control" placeholder="[email protected]" required />
          </div>
          <div className="form-group">
            <label htmlFor="input-password">Password</label>
            <input type="password" name="password" id="input-password" className="form-control" placeholder="Required" required />
          </div>
          <div className="container-fluid">
            <div className="row">
              <div className="col-xs-6">
                <div className="form-group">
                  <div className="checkbox i-checks-box"><label> <input type="checkbox" /><i /> Remember Me </label></div>
                </div>
              </div>
              <div className="col-xs-6 text-right">
                <a href="/" className="btn btn-primary">Sign In</a>
              </div>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

client/app/bundles/Doxly/startup/SignInForm.jsx

import React from 'react';
import { Provider } from 'react-redux';

import createStore from '../store/doxlyStore';
import SignInForm from '../components/SignInForm';

// See documentation for https://github.com/reactjs/react-redux.
// This is how you get props from the Rails view into the redux store.
// This code here binds your smart component to the redux store.
export default (props) => {
  const store = createStore(props);
  const reactComponent = (
      <SignInForm />
  );
  return reactComponent;
};

client/app/bundles/Doxly/startup/clientRegistration.jsx

import ReactOnRails from 'react-on-rails';
import SignInForm from './SignInForm';

ReactOnRails.register({ SignInForm });

app/views/sessions/new.html.erb

<div class="wrap-narrow">
    <div class="box-middle">
        <div class="inner">
            <div class="center-logo"><a href="#"><%= image_tag "logo.svg" %></a></div>
            <%= react_component 'SignInForm' %>


            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <a href="#">Forgot your password?</a>
                        </div>
                    </div>
                    <div class="col-xs-6 text-right">
                        Don’t have an account? <a href="#">Sign Up.</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now when I go to sessions/new, I get the following:

RENDERED SignInForm to dom node with id: SignInForm-react-component-0 with props, railsContext: Object {} Object {href: "http://localhost:5000/app/account/sign_in", location: "/app/account/sign_in", scheme: "http", host: "localhost", port: 5000…}
handleError.js?bcc0:53Exception in rendering!exports.default @ handleError.js?bcc0:53render @ clientStartup.js?0ac5:109forEach @ clientStartup.js?0ac5:65forEachComponent @ clientStartup.js?0ac5:55reactOnRailsPageLoaded @ clientStartup.js?0ac5:131triggerEvent @ turbolinks.self-c37727e….js?body=1:334(anonymous function) @ turbolinks.self-c37727e….js?body=1:703
handleError.js?bcc0:65message: Could not find component registered with name SignInForm. Registered component names include [ HelloWorldApp ]. Maybe you forgot to register the component?exports.default @ handleError.js?bcc0:65render @ clientStartup.js?0ac5:109forEach @ clientStartup.js?0ac5:65forEachComponent @ clientStartup.js?0ac5:55reactOnRailsPageLoaded @ clientStartup.js?0ac5:131triggerEvent @ turbolinks.self-c37727e….js?body=1:334(anonymous function) @ turbolinks.self-c37727e….js?body=1:703
handleError.js?bcc0:66stack: Error: Could not find component registered with name SignInForm. Registered component names include [ HelloWorldApp ]. Maybe you forgot to register the component?
    at Object.get (eval at <anonymous> (http://localhost:5000/assets/app-bundle.self-df686281fd2dd7344fa078e7d241a56a83687b851aed288aba2620be255a54a2.js?body=1:1328:2), <anonymous>:70:13)
    at Object.getComponent (eval at <anonymous> (http://localhost:5000/assets/app-bundle.self-df686281fd2dd7344fa078e7d241a56a83687b851aed288aba2620be255a54a2.js?body=1:18:2), <anonymous>:178:40)
    at createReactElement (eval at <anonymous> (http://localhost:5000/assets/app-bundle.self-df686281fd2dd7344fa078e7d241a56a83687b851aed288aba2620be255a54a2.js?body=1:1248:2), <anonymous>:45:45)
    at render (eval at <anonymous> (http://localhost:5000/assets/app-bundle.self-df686281fd2dd7344fa078e7d241a56a83687b851aed288aba2620be255a54a2.js?body=1:282:2), <anonymous>:94:73)
    at forEach (eval at <anonymous> (http://localhost:5000/assets/app-bundle.self-df686281fd2dd7344fa078e7d241a56a83687b851aed288aba2620be255a54a2.js?body=1:282:2), <anonymous>:65:5)
    at forEachComponent (eval at <anonymous> (http://localhost:5000/assets/app-bundle.self-df686281fd2dd7344fa078e7d241a56a83687b851aed288aba2620be255a54a2.js?body=1:282:2), <anonymous>:55:3)
    at HTMLDocument.reactOnRailsPageLoaded (eval at <anonymous> (http://localhost:5000/assets/app-bundle.self-df686281fd2dd7344fa078e7d241a56a83687b851aed288aba2620be255a54a2.js?body=1:282:2), <anonymous>:131:3)
    at triggerEvent (http://localhost:5000/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1:334:21)
    at HTMLDocument.<anonymous> (http://localhost:5000/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1:703:7)exports.default @ handleError.js?bcc0:66render @ clientStartup.js?0ac5:109forEach @ clientStartup.js?0ac5:65forEachComponent @ clientStartup.js?0ac5:55reactOnRailsPageLoaded @ clientStartup.js?0ac5:131triggerEvent @ turbolinks.self-c37727e….js?body=1:334(anonymous function) @ turbolinks.self-c37727e….js?body=1:703

I tried to copy the structure of the HelloWorld example so I'm not too sure why my SignInForm isn't registered.

[chintanparikh]

... and 5 seconds later I figured out that I had to include it in webpack.client.base.config.js.

I'll leave this here in case anyone finds it in the future.

[dimanyc]

@chintanparikh I am having the same exact issue. Did you include your new component as an additional entry point in webpack.config.js?

[micahalcorn]

@chintanparikh yeah, I don't see where to find that step in the Readme. I'm unclear on why ReactOnRails.register is not sufficient.

@dimanyc I added another line to my webpack.cong.js entry array (similar to HelloWorldApp) as described here and it solved the issue.

[ethanbonin]

Don't know if people are still having an issue.
The problem does lies with the webpack.config.js _when_ you end up just renaming the "HelloWorld" Folder from the Example React install.

With the entry, it is originally like so

  entry: {
    'webpack-bundle': [
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'babel-polyfill',
      './app/bundles/HelloWorld/startup/registration',
    ],
  },

So if you just quickly update that last line './app/bundles/$YOUR_FOLDER_NAME/startup/registration', Then it will find all your components.

[stoplion]

Ughh been struggling with the same thing for hourssss