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:

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

[jacksontrieu]

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.

[BrunoQuaresma]

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