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:
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)
For anyone else who is having this issue, I found a fix which involved doing two things:
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 inapp/assets/javascripts/application.js
Go to your
app/assets/javascripts/application.js
file and remove the following lines if they exist: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: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, whereasminiracer
runs version 7+ of LibV8 which does allowSet
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.