react-rails: Process is not defined

I followed the tutorial and install the react-rails using these commands:

bundle install
rails g react:install

After that I created a component HelloMessage.jsx on /components folder:

var HelloMessage = React.createClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

And when I render it:

<%= react_component('HelloMessage', name: 'John') %>

These errors are raised: image

Uncaught ReferenceError: process is not defined
    at index.self-a216c390bf956cbb906c66d29fdb2e2ad6999464a5ca83e476533a6f25ad0ef3.js?body=1:3
(anonymous) @ index.self-a216c390bf956cbb906c66d29fdb2e2ad6999464a5ca83e476533a6f25ad0ef3.js?body=1:3
HelloMessage.self-4549b24fbb2deaf10a4a0b39add3517999d4dfe318fedb65f157caa5c1ccf19c.js?body=1:1 Uncaught ReferenceError: React is not defined
    at HelloMessage.self-4549b24fbb2deaf10a4a0b39add3517999d4dfe318fedb65f157caa5c1ccf19c.js?body=1:1
(anonymous) @ HelloMessage.self-4549b24fbb2deaf10a4a0b39add3517999d4dfe318fedb65f157caa5c1ccf19c.js?body=1:1
react_ujs_mount.self-169a668bfd47eb081c36fa9e36ed23fa4d6088ff552a2065a64a571fc3c29837.js?body=1:83 [react-rails] Cannot find component: 'HelloMessage' for element <div data-react-class=​"HelloMessage" data-react-props=​"{"name":​"John"}​">​</div>​
react_ujs_mount.self-169a668bfd47eb081c36fa9e36ed23fa4d6088ff552a2065a64a571fc3c29837.js?body=1:84 Uncaught Error: Cannot find component: 'HelloMessage'. Make sure your component is globally available to render.
    at Object.mountComponents (react_ujs_mount.self-169a668bfd47eb081c36fa9e36ed23fa4d6088ff552a2065a64a571fc3c29837.js?body=1:84)
    at HTMLDocument.<anonymous> (react_ujs_turbolinks.self-19cb50a828b179c80e0ef6463ceb612ae3e75f377fb2dd6f4afdc3b46ae75d56.js?body=1:5)
    at Object.Turbolinks.dispatch (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6)
    at e.Turbolinks.Controller.e.notifyApplicationAfterPageLoad (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
    at e.Turbolinks.Controller.e.pageLoaded (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
    at turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 17 (6 by maintainers)

Most upvoted comments

For anyone else who is having this issue, I found a fix which involved doing two things:

  1. If you have a app/assets/javascripts/server_rendering.js file, delete the whole file and make sure it isn’t referenced in a //= require statement in app/assets/javascripts/application.js

  2. Go to your app/assets/javascripts/application.js file and remove the following lines if they exist:

//= require react
//= require react_ujs

I think the reason why the error occurs is because my project was initially configured to run the react-rails gem in Asset Pipeline mode, whereby the first command I ran after installing the gem was:

rails g react:install

This adds those extra require statements in the app/assets/javascripts/server_rendering.js & app/assets/javascripts/application.js files, as it expects Rails’ asset pipeline to be bundling the react components.

Switching to Webpacker mode requires removing those require statements in those two files.

I removed the folder node_modules, ran again 'rails g react: install` and it worked.

@AirWick219 therubyracer won’t work with ES6 Javascript as it runs version 3 of LibV8, whereas miniracer runs version 7+ of LibV8 which does allow Set and modern exports and Class syntax. Both Sprockets and Webpacker use the same ExecJS code for serverside rendering so if it’s a new problem after migrating I’d be curious to see a reproduction of that.

Edit: With regards to the less gem, it’s deprecated in favour of the less JS repo. You could switch from Less.rb to Less.js and use it through Webpacker: https://github.com/less/less.ruby#note-from-now-on-new-development-on-less-will-be-happening-in-httpgithubcomlesslessjs

Edit2: In-case anyone is curious why I don’t just put a hard dependency on Miniracer about this issue is if you’re using jruby, TheRubyRhino works well also, and neither are needed if you just use JS clientside. Very hard for me to reject the use of TheRubyRacer in that circumstance.

@jacksontrieu Thanks for helping out in this thread so far 😃 hope to see you around.