[react-rails] Cannot find component for element

[alebian]

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.
• 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.

---

Hi,

I wanted to try the gem and in development everything works fine but in production I get this error:

[react-rails] Cannot find component: 'Title' for element ...

The component is a very simpĺe one:

class Title extends React.Component {
  render() {
    return (<h1>{this.props.text}</h1>);
  }
}

I followed all the instructions in the README (added all the "requires" in files), I also read and followed other people's solutions to the same problem by adding config.react.variant = :production.

I believe that the problem comes after the assets minification. In the application.js minified I can see a Test function being defined but I think it might be in a different scope that the gem expects.

My Gemfile is this and my Gemfile.lock is this

Thanks!

[kyleknighted]

Update your component code to include the import for React and export the module.

import React from 'react';

class Title extends React.Component {
  render() {
    return (<h1>{this.props.text}</h1>);
  }
}

export default Title;

[alebian]

@kyleknighted That raises this error in development:

Uncaught ReferenceError: exports is not defined

And of course after:

[react-rails] Cannot find component: 'Title' for element

[rmosolgo]

Your error includes exports, but I don't see that word in the example code above. Can you post the file which gives you the ReferenceError?

[alebian]

@rmosolgo The code is this:

import React from 'react';

class Title extends React.Component {
  render() {
    return (<h1>{this.props.text}</h1>);
  }
}

export default Title;

As @kyleknighted told me to try

[kyleknighted]

You could try giving this a shot.

open up config/webpack/loaders/react.js and change it to

module.exports = {
  test: /\.(js|jsx)?(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  query: {
    presets: ['react', 'es2015', 'stage-2']
  }
}

and run
yarn add babel-preset-es2015 babel-preset-react babel-preset-stage-2
in your CLI, then restart your webpack compiler

---

EDIT: Also, just to verify, your component extension is jsx correct?

[alebian]

@kyleknighted the filename is title.js.jsx also I don't have webpacker installed because it is a legacy application that I upgraded to Rails 4.2. Do I need to install webpacker?

[rmosolgo]

Sprockets doesn't support Nodejs modules, so the code above is for webpacker only.

I think your first hunch is correct, it's a problem caused by minification. Uglify 3.1 minifies top-level identifiers by default, see: #668 (comment)

I see your gemfile.lock has uglify 3.2, could you try reverting to 3.0 ?

[alkesh26]

@alebian, Do we have any updates on this? If the issue persists, we can reopen this. Closing this for now.

[almyasheva-venera]

I got the same problem.
This https://github.com/reactjs/react-rails/blob/master/README.md#3-install-react-and-some-other-required-npm-packages helps me.

Take a look at your package.json and add babel configuration
Also update the Babel configuration in the package.json file:

"babel": {
  "presets": [
-   "./node_modules/shakapacker/package/babel/preset.js"
+   "./node_modules/shakapacker/package/babel/preset.js",
+   "@babel/preset-react"
  ]
},