Unable to register any components?

Rails react_on_rails
1

Hi All,

Firstly, thank you for your work on bridging the (huge) gap between the React & NPM and Rails ecosystems - being able to structure applications in this way will be immensely helpful. :slight_smile:

I am currently writing a new application using Rails 5 and React_on_Rails 6.0.1, however have run into some issues registering react components - namely, the following error.

Could not find component registered with name UserHeader. 
Registered component names include [ HelloWorldApp ].
Maybe you forgot to register the component?

My client directory is currently structured as follows:

- client
  - app
    - bundles
         - UserHeader
           - components
              - UserHeader.jsx
           - startup
              - Registration.jsx

I have defined my UserHeader component using ES6, as per the HelloWorldApp example, and am registering my component as follows:

console.log("Registering user header component...");

import React from 'react';
import ReactOnRails from 'react-on-rails';
import UserHeaderWidget from '../components/UserHeader'

const UserHeader = (props, _railsContext) => {
   return <UserHeaderWidget {...props} />
};

ReactOnRails.register({ UserHeader });

I’m attempting to render this component from a rails partial, located in app/views/layouts/partials, as follows:

<%= react_component('UserHeader', props: @user, prerender: true) unless @user.nil? %>

Interestingly, the console.log() call in Registration.jsx is not invoked.

I suspect I’m missing something rather obvious, but can’t for the life of me work out what. :slight_smile:

Any help is greatly appreciated.

Thanks! :slight_smile:

2

It turns out that I needed to add the startup script’s path to the webpack configuration file.

Rather than having to manually add entry points for each new bundle, I ended up using glob to automatically identify each bundle. i.e.

var glob = require('glob');

config = {
 entry: [
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'babel-polyfill',
   ].concat(glob.sync("./app/bundles/**/startup/*")),
...
}

Now I can simply add a new bundle, register it using a file in the startup directory, and have Webpack automatically use it.

1 Like
3

@XtraSimplicity Thanks for the writeup!

4

I’m having the same issue in that Registered component names include [ ]. I keep seeing solutions that involve adding things to webpack.config.js, but I don’t have that file and I’m afraid to create one, as I’m new to Webpack, and am not sure if it will mess everything up. I followed the tutorials for installing react_on_rails, so I figure if I needed it, it would be there. I did, however, change

(in config/initializers/react_on_rails.rb)

config.server_bundle_js_file = “hello-world-bundle.js”

to

config.server_bundle_js_file = “order-manager-bundle.js”

where order-manager-bundle.js is the name of the file that registers my components, and is in the same directory as hello-world-bundle.js.

Should I have webpack.config.js after going through the tutorial steps? Do I have to webpack init or something?

I should add I’m also getting Uncaught ReferenceError: regeneratorRuntime is not defined

5

React on Rails v9 uses the default rails/webpacker config rather than a template webpack config file.