React-rails: .js.jsx files are not transformed/compiled.

[keer007]

Trying to use react-rails in a new jrails project. Getting the following error when trying to include a jsx file assets/javascript/components/onboard.js.jsx ... via application.js/components.js

 Showing /.../rails-root/app/views/layouts/application.html.haml where line #7 raised:

TypeError: Expected argument of type object, but instead had type object
  (in /.../rails-root/app/assets/javascripts/components/onboard.js.jsx)

Extracted source (around line #7):

5      %title abc
6      = stylesheet_link_tag    "application", media: "all"

7      = javascript_include_tag "application"

8      = csrf_meta_tags
10    %body

Seems like rails complains that the included javascript file is not a *.js but an unknown extension *.jsx. I also tried renaming onboard.js.jsx to onboard.js, to see if that fixes the issue, but that just causes the file to be reloaded raw into the browser and so jsx compilation is still not happening.

Using jruby 1.7, gems react-rails 1.4, rails 4.0, jquery-rails 3.0, execjs 2.3

[keer007]

Just tried using legacy JSXTransformer by adding the following to config/application.rb
config.react.jsx_transformer_class = React::JSX::JSXTransformer

and things started to work fine. I still want to use the default Babel based transform; how to debug the issue with Babel transform?

[rmosolgo]

It looks like it might have hit an error while compiling onboard.js.jsx, can you share the source for that file?

Or, is there an issue with Rhino? Look similar to this: https://github.com/andyearnshaw/Intl.js/issues/81

[keer007]

onboard.js.jsx was very simple to begin with. Just ...

var Onboard = React.createClass({
    render: function() {
        return (
                Hi
        );
    }
});

I've changed it since once I got the legacy JSXTransformer running. Babel transform didn't even work for the above simple code.

[rmosolgo]

Humm, I wonder if it's a JRuby-specific issue, it seems to work ok for me on CRuby. Here's my output:

$ rails c
Loading development environment (Rails 4.2.4)
irb(main):001:0> React::Rails
=> React::Rails
irb(main):002:0> React::JSX.transformer_class
=> React::JSX::BabelTransformer
irb(main):003:0> React::JSX.transform(%|
irb(main):004:1" var Onboard = React.createClass({
irb(main):005:1"     render: function() {
irb(main):006:1"         return (
irb(main):007:1"                 Hi
irb(main):008:1"         );
irb(main):009:1"     }
irb(main):010:1" });
irb(main):011:1" |)
=> "\nvar Onboard = React.createClass({\n    displayName: \"Onboard\",\n\n    render: function () {\n        return Hi;\n    }\n});"
irb(main):012:0>

Is Hi a global object in this case? You could try wrapping it in quotes to make it a string, eg "Hi", maybe that would help?

[keer007]

"Hi" doesn't work either. Still continuing to use legacy JSXTransformer but running into import statement issues. Having Babel transformer would be great.

[austinfox]

I'm seeing this error as well. The following versions are being user:

rails-react = 1.4;
ruby-babel-transpiler = 0.7;
execjs = 2.3;
uglifier = 2.7;
jruby 1.7.1;

Specific error:

Rhino::JSError in Portal::IndexController#index
TypeError: Expected argument of type object, but instead had type object (in {Rails workspace path here}/rails-root/app/assets/javascripts/components/index.js.jsx)

The index_controller contains:

def index
    render component: 'Index', props: { customerId: "test_customer_id" }
end 

and the index.js.jsx file contains:

class Index extends React.Component {
  render () {
    return (
      <div>
        <div>Customer: {this.props.customerId}</div>
      </div>
    );
  }
}

Index.propTypes = {
  customerId: React.PropTypes.string
};

[rmosolgo]

Thanks for that version info. Here's the JRuby run on Travis: https://travis-ci.org/reactjs/react-rails/jobs/93226779

• jruby 1.7.19 (1.9.3p551) 2015-02-05 32f5af0 on Java HotSpot(TM) 64-Bit Server VM 1.7.0_76-b13 +jit [linux-amd64]
• execjs 2.6.0
• babel-transpiler 0.7.0
• NO uglifier

I see a few differences:

• JRuby version
• ExecJS version
• no uglifier

Can you try changing any of those things for your environment? Maybe that will shed some light on the issue!

[austinfox]

I'll try upgrading the JRuby and ExecJS versions, and remove uglifier.

In the meantime, could this possibly be the culprit? https://github.com/mozilla/rhino/issues/233

Seems like this issue was fixed recently, but this change hasn't been pulled into therubyrhino package yet (I am currently using version 2.0.2)

[jrasanen]

I get the following error on Windows,

irb(main):011:1" var Onboard = React.createClass({
irb(main):012:1"      render: function() {
irb(main):013:1"      return (
irb(main):014:1"       "Hi"
irb(main):015:1"     );
irb(main):016:1"    }
irb(main):017:1" });
irb(main):018:1" |)
ExecJS::RuntimeError: SyntaxError: Invalid character
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:14:in `initialize'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `new'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `compile'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/module.rb:27:in `compile'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/babel-transpiler-0.7.0/lib/babel/transpiler.rb:24:in `context'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/babel-transpiler-0.7.0/lib/babel/transpiler.rb:28:in `transform'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/react-rails-1.4.2/lib/react/jsx/babel_transformer.rb:17:in `transform'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/react-rails-1.4.2/lib/react/jsx.rb:21:in `transform'
from (irb):10
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/console.rb:110:in `start'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/console.rb:9:in `start'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/commands_tasks.rb:68:in `console'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/commands_tasks.rb:39:in `run_command!'
from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands.rb:17:in `<top (required)>'
from bin/rails:8:in `require'
from bin/rails:8:in `<main>'
irb(main):019:0>

With "React::JSX::JSXTransformer" the error changes:

irb: warn: can't alias context from irb_context.
irb(main):001:0> React::JSX.transform(%|
irb(main):002:1" var Onboard = React.createClass({
irb(main):003:1"      render: function() {
irb(main):004:1"      return (
irb(main):005:1"       "Hi"
irb(main):006:1"     );
irb(main):007:1"    }
irb(main):008:1" });
irb(main):009:1" |)
ExecJS::ProgramError: TypeError: Object doesn't support this property or method
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:14:in `initialize'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `new'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `compile'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/execjs-2.6.0/lib/execjs/module.rb:27:in `compile'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/react-rails-1.4.2/lib/react/jsx/jsx_transformer.rb:17:in `initialize'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/react-rails-1.4.2/lib/react/jsx.rb:20:in `new'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/react-rails-1.4.2/lib/react/jsx.rb:20:in `transform'
        from (irb):1
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/console.rb:110:in `start'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/console.rb:9:in `start'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/commands_tasks.rb:68:in `console'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands/commands_tasks.rb:39:in `run_command!'
        from C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/railties-4.2.3/lib/rails/commands.rb:17:in `<top (required)>'
        from bin/rails:8:in `require'
        from bin/rails:8:in `<main>'

[apat]

This work for me on Windows

Before, check if nodejs is installed.

node --version

If don't have nodejs installed, download & install node, then restart your console. That's it.

Seldom, you need to set the javascript runtime in _config/boot.rb_. See: stackoverflow answer
ENV['EXECJS_RUNTIME'] = 'Node'

[kelaidit]

worked for me as well ; many thanks !