React-Rails: .js.jsx file crashes Rails application

Question

I'm new to Rails and ReactJS.

I've been having a lot of issues rendering a simple "Hello World" component with the react-rails gem on Rails 5.0.2, running on Windows 7.

If I include a .js.jsx file in the components folder, my app crashes. Interestingly enough, if I replace it with the plain .js version of ReactJS (and change nothing else), my app doesn't crash and the component renders on my page. However, I would really like to learn to use JSX in my Rails app for the sake of learning, if anything else.

It says I have a SyntaxError, but this only confuses me, because using the regular JS version doesn't throw this error. So I'm guessing the JSX isn't getting transpiled to regular JavaScript or something? Does react-rails not have this built-in? Is this error related to a missing Gem in my Gemfile?

This is the closest SO answer I found with the same problem. I tried downgrading to 4.2.5.1, but I still received the same problems.

I'd greatly appreciate any advice or pointers on the matter!

Error message in app/views/layouts/application.html.erb:

SyntaxError: Invalid character
...          
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

app/assets/javascripts/components/main.js.jsx

/** 
 * @jsx React.DOM 
 */

var Main = React.createClass({
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
});
//I have also tried using React.renderComponent and gotten the same result
//I've also considered using class Main extends Component

app/views/index/helloworld.html.erb

<div id="content">
    ...
    <%= react_component('Main') %>
    //I have also tried <%= react_component 'Main' %> and gotten the same result
    ...
</div>

Gemfile:

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.0.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

# Fix issues with running Rails on Windows
gem 'coffee-script-source', '1.8.0' 

gem 'react-rails', '~> 1.7', '>= 1.7.1'
gem 'jquery-rails', '~> 4.1', '>= 4.1.1'

score 0 · Answer 1 · answered Mar 17 '17 at 17:58

To be sure, did you restart your development server (rails s) after installing the gem? It must be restarted to add the Sprockets processor for .jsx.

Could you add your complete Gemfile.lock also? I'm interested to see the Sprockets version and see what ExecJS backend you're using.

score 0 · Answer 2 · edited Mar 19 '17 at 20:47

It looks like you trying to use ES6 syntax in your js.jsx component.

Here

var Main = React.createClass({
 -->>> render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
});

This should be:

var Main = React.createClass({
    render: function(){
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
});

React-Rails: .js.jsx file crashes Rails application

2 Answers2