I'm using browserify-rails + babelify to transpile jsx in a react + rails project.
I'm very puzzled why // require('');
is needed in components.js
(which is the mounting point of react) for the jsx transpilation to work.
If I delete the line of comment // require('');
, I would get "SyntaxError: Unexpected token import"
Currently I have no leads as why would a line of comment affect the transpilation. I'm also puzzled about if this is a problem of react, or babelify, or browserify, or browserify-rails, or rails asset pipeline.
Please refer to https://github.com/sidazhou/react_rails_skeleton/tree/v0.0.1 for the full code base
components.js
// require(''); // somehow this is necessary, why?! Otherwise we get: "SyntaxError: Unexpected token import"
import React from 'react';
import ReactDOM from 'react-dom';
import Widgets from './components/Widgets.jsx';
ReactDOM.render( <Widgets />, document.getElementById('react_component') );
package.json
{
"name": "react-sample",
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"browserify-incremental": "^3.0.1",
"history": "^1.13.1",
"material-ui": "^0.13.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"react-tap-event-plugin": "^0.2.1"
},
"engines": {
"node": ">= 0.10"
}
}
application.rb
config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]"
There is an open issue for
browserify-rails
about that:#124 transforms are only applied to files loaded with
require()
.I'm trying to summarize the thread by quoting some of cymen posts that I think are relevant (he's the author of browserify-rails).
cymen commented on 10 Dec 2015:
cymen commented on 18 Dec 2015
mockdeep(he opened the issue) commented on 18 Dec 2015:
cymen commented on 18 Dec 2015:
cymen commented on 18 Dec 2015:
That was his last comment on the issue (3 months ago). So that workaround you already have is the best solution available at this moment (until someone implements ES6 detection in browserify-rails).