Got ES6 with imports working, but prerender fails

[jlebensold]

Hi there,

I've managed to get a sample app working with Flux, ES6 and the react-rails view helpers and everything is working as long as I don't try to use prerender: true in my react component:
https://github.com/jlebensold/reactadvisor/blob/master/app/views/restaurants/show.html.erb#L15

I'm using SystemJS to load my modules and have had to make my base component accessible in the root context, however it seems like ExecJS doesn't have the right JavaScript implementation for the module loader. I get this error when I set prerender: true in my component:

ExecJS::ProgramError in Restaurants#show
Error: Cannot find module 'vertx'

Is there a better way of using module imports without Browserify and Node and with react-rails?

If not, is there another module loader that I could use with Babel that will enable ES6 classes in prerendered code?

My sample project is here and can be started with a bundle and a rake db:setup in a few moments:
https://github.com/jlebensold/reactadvisor

Thanks for a great gem!

[rmosolgo]

Looks like ExecJS doesn't support require: https://github.com/rails/execjs#faq

They mention this possibility: https://github.com/cowboyd/commonjs.rb You could try that (and let us know if you have any luck)!

[borisrorsvort]

@rmosolgo Any idea if you'll switch to Babel one day? since it has become integrated in react-tools, it kind of make cense, am I wrong?

[rmosolgo]

We use Babel for transforming JSX files (on master, as of #295) but supporting require for JS dependencies means working around Sprockets (or reimplementing it?), which is a bit beyond the scope of react-rails!

[rescribet]

For other people hitting prerendering issues (since it does use Browserify);
I got prerendering to work with browserify-rails

It doesn't allow you to use import, but it does work with require & module.exports.

• Follow the instructions to integrate browserify-rails into the project
• Remove all the //require= items from application.js and components.js
  • Replace gemified JS packages with their npm counterparts and include the right modules in each component/js file.
  • Note: I had to copy react_ujs.js into lib/assets
• Let your components.js include modules on window scope:
  • window.Module = require('./components/Module');
• Update the command line options to support react & ES6
  • In application.rb: config.browserify_rails.commandline_options = "-t reactify -t [ es6ify --extension=\".js\" ] -t debowerify"
  • Note: I need debowerify here since some packages aren't available in NPM
• For completeness, I've also added the transforms to package.json

I might have missed a step, since these are the results of 3 days of getting this thing to work completely.

So, what this does is using the browserify-rails gem as a sprockets post-processor to transpile components.js to ExecJS parseable JS.

An additional thought; components.js needs to define all components on window scope, an option to tell react_ujs to use a require would be nice;
=react_component 'SomeComponent', {nice: 'properties'}, {prerender: true, is_module: true}
=react_component 'SomeComponentContainer', {nice: 'properties'}, {prerender: true, is_module: true, path: './containers/SomeComponentContainer'}
But I have no idea about the feasibility of this.

Sorry if this is polluting this issue, but I couldn't find a good guide on integrating CommonJS with React-rails

[alex35mil]

I decided to separate a concerns and make Rails just JSON API for client apps. And I feel that it's right way of doing SPAs.

Details here: https://github.com/alexfedoseev/generator-flux-on-rails

[rmosolgo]

Thanks for sharing some solutions here! I'll keep an eye out for forthcoming Rails 5.1 asset changes too, and see if there's anything react-rails can take advantage of.