React-Rails: .js.jsx-Datei stürzt ab Rails-Anwendung

Question

Ich bin neu bei Rails und ReactJS.

Ich habe eine Menge Probleme mit Rendern einer einfachen „Hallo Welt“ Komponente mit dem reagieren Schienen gem on Rails 5.0.2 unter Windows 7.

Wenn ich einen .js.jsx umfassen Datei im Komponentenordner, stürzt meine App ab. Interessanterweise stürzt meine App nicht ab und die Komponente rendert auf meiner Seite, wenn ich sie durch die einfache .js-Version von ReactJS ersetze (und nichts anderes ändere). Ich würde jedoch gerne lernen, JSX in meiner Rails-App zu verwenden, um zu lernen, wenn überhaupt etwas anderes.

Es sagt, dass ich einen SyntaxError habe, aber das verwirrt mich nur, weil die Verwendung der normalen JS-Version diesen Fehler nicht verursacht. Ich vermute also, dass der JSX nicht in reguläres JavaScript umgewandelt wird oder so? Hat reacts-rails diesen nicht eingebaut? Ist dieser Fehler mit einem fehlenden Edelstein in meinem Gemfile verbunden?

This is the closest SO answer I found with the same problem. Ich habe versucht, Downgrade auf 4.2.5.1, aber ich habe immer noch die gleichen Probleme.

Ich würde sehr schätzen jeden Rat oder Hinweise in dieser Sache!

Fehlermeldung in app/views/layout/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' 

Answer 1

Um sicher zu sein, haben Sie Ihren Entwicklungsserver (rails s) nach der Installation des Edelsteins neu gestartet? Es muss neu gestartet werden, um den Ritzels Prozessor für .jsx hinzuzufügen.

Können Sie auch Ihre komplette Gemfile.lock hinzufügen? Ich bin interessiert, die Sprockets Version zu sehen und zu sehen, was ExecJS Backend Sie verwenden.

Answer 2

Es sieht so aus, als ob Sie versuchen, die ES6-Syntax in Ihrer js.jsx-Komponente zu verwenden.

Hier

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

Dies sollte sein:

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