Using npm addons with react-rails

[SylarRuby]

This is not an issue. I just need to know how to go about this.

How to add addons, let's say from react-components.com, to use with this gem?

[hayesgm]

It would be great to add a section about this in README.md or on a wiki page.

[butsjoh]

Not clear to me either how to use custom babel plugins :(

[gauravtiwari]

You could use browserify-rails (1.5.0) gem or bower-rails gem or Rails Assets to pull in third party plugins or components (depending on where they are available).

With browserify you will have to use Common JS standard to write modular components. With others you can just use global objects, like: window.jQuery

If you decide to use browserify, just follow the gem installation instructions and setup your app like so:

Using browserify

Application.js Setup

//= require_self
//= require components
//= require turbolinks
//= require react-server
//= require react_ujs

// Setup React in global scope
var React = window.React = global.React = require('react');
var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom');
window.$ = window.jQuery = require('jquery')
require('jquery-ujs')

Components.js

// Setup app into global name space for server rendering
var app = window.app = global.app = {};

// Component::Manifest
var NoContent = require('./components/no_content.es6.js');

// Include into app namespace
app.NoContent = NoContent;

Loading NPM modules

// Require React
React = require('react/addons');
import component from './component.js'
import mui from 'material-ui';
// Your third party add-ons from react component
// Define component
const NoContent = React.createClass({

  render() {
    return (
        <span className="no_content">
         Empty content
        </span>
      );
  },
});

module.exports = NoContent;

# render in rails views
<%= react_component 'app.NoContent', {prerender: true} %>

For Babel Plugins:

From babel 6.0, there are no plugins included by default, you will have to use .babelrc file in project root (in this case rails root) to define presets and plugins like so or pass command line options:

{
  "plugins": ["syntax-jsx"],
  "presets": ["es2015", "react"]
}

browserify script.js -o bundle.js \  -t [ babelify --presets [ es2015 react ] ] (// application.rb with browserify)

You could also use react-rails configuration to load es6 functions or plugins like so:

gem 'babel-transpiler

   # application.rb
    config.react.jsx_transform_options = {
      plugins: ['transform-class-properties']
    }

Make sure you install the plugin via npm npm install babel-plugin-transform-class-properties --save

There are others solutions like using: Webpack with separate/integrated client application, for example.

[smnplk]

@gauravtiwari in you application.js file, why is it needed to require react via sprockets ? Wouldn't that load react two times ?

[gauravtiwari]

@smnplk Yeah you are right :) I will edit the comment, thanks

[smnplk]

Ok, thank you :) Also, I think folks that use react >= 0.14.0 need to require ReactDOM too, because react_ujs.js depends on it. So if you can add the following line:

var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom');

[gauravtiwari]

@smnplk Yes that's right :) As you have pointed out - React DOM is now a separate package therefore, it must be included for rendering components. I have updated the comment.

[TSMMark]

I can not get this working without multiple copies of React being loaded.

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded

[gauravtiwari]

Hey @TSMMark Just double check if you are loading it twice anyhow - both in Sprockets and NPM. You may also want to reinstall node modules (rm -rf node_modules directory first) with node(4 or 5) and npm(3.5+) to make sure there aren't duplicated copies installed.

[awe2m2n2s]

@gauravtiwari: Thanks for showing a way with browserify. Do you also know how to do it with the asset-pipeline?
Sorry for asking but we are new to the whole world and are wondering about the best way to use react and rails. Unfortunately, until yet, we only found solutions where we had to install npm on the server, is that really necessary? -> sorry for asking that dumb but we cannot figure out how to get react-leaflet working on rails: PaulLeCam/react-leaflet#133 without installing npm on the server which seems from our side to be a big overload (having npm and ror on the same server)

Thank you for any support!

[rmosolgo]

You could try copying this file into your app: https://github.com/PaulLeCam/react-leaflet/blob/master/dist/react-leaflet.js

For example, if you copied it to app/assets/javascripts/vendor/react-leaflet.js, you could require it with the asset pipeline:

//= require leaflet 
//= require react 
//= require vendor/react-leaflet

This line (root["ReactLeaflet"] = factory(root["L"], root["React"], root["ReactDOM"]);) tells me that it depends on a few globals: L, React, and ReactDOM. react-rails will provide the last two; I assume L is leaflet?

FWIW, that's how I bring third party components into my app:

• Find "compiled", non-minified version, either in /dist or on a CDN
• Copy it into app/assets/javascripts/vendor
• Add the version number to the filename, for record-keeping (eg, react-leaflet-v0.10.2.js)
• Require it with sprockets //= require ./vendor/react-leaflet-v0.10.2

[lesliev]

Hi @gauravtiwari, thanks for the guide above - can you help with a few questions?

I am trying to reconcile your instructions with those at browserify-rails but both assume a level of understanding a little beyond mine. Following your browserify instructions, where do you put the "Loading NPM modules" code? Where do you run "npm install" to actually install the module? What is no_content.es6.js? Is NoContent the name of the hypothetical NPM module you are loading?

Also, the browserify-rails documentation says to create a package.json file with "name": "something" in it. Is that where I'm supposed to specify the NPM module I want to use?

The NPM module I am trying to include in my react-rails app is 'react-data-grid'.

[lesliev]

@gauravtiwari, I've since proceeded based on some assumptions. I created a package.json file like this and ran npm install:

{
  "name": "testproject",
  "dependencies" : {
    "react-data-grid": "0.14.22",
    "browserify": "~10.2.4",
    "browserify-incremental": "^3.0.1"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

This installed a huge amount of JS (55MB) under node_modules. I ran cd node_modules/react-data-grid && browserify index.js -o react_data_grid.js to try and get browserify to bundle the component.

This produced errors about react and react-dom being missing but since it seems they are included already I excluded them like this: browserify index.js -i react -i react-dom -o react_data_grid.js.

The result was a react_data_grid.js and a dist directory, both of which I copied to my Rails app's app/assets/javascripts/components directory.

Then I tried modifying application.js and components.js as you mention above. First I had to rename components.js to components.jsx because of the jsx content.

Loading a page then produced this error:

Browserify: /home/leslie/dev/git/hb/testproject/node_modules/.bin/browserifyinc --list --cachefile=/home/leslie/dev/git/hb/testproject/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/home/leslie/dev/git/hb/testproject/tmp/cache/browserify-rails/output20160408-2868-18hl8dy" -
Completed 500 Internal Server Error in 1181ms (ActiveRecord: 5.4ms)


[Rollbar] Reporting exception: Error while running `/home/leslie/dev/git/hb/testproject/node_modules/.bin/browserifyinc --list --cachefile=/home/leslie/dev/git/hb/testproject/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/home/leslie/dev/git/hb/testproject/tmp/cache/browserify-rails/output20160408-2868-18hl8dy" -`:

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module 'jquery-ujs' from '/home/leslie/dev/git/hb/testproject/app/assets/javascripts'
    at /home/leslie/dev/git/hb/testproject/node_modules/resolve/lib/async.js:46:17
...

My application.js looks like this:

//= require jquery
//= require jquery_ujs
//= require select2
//= require react
//= require react_ujs
//= require js-routes
//= require components
//= require_tree .

// Setup React in global scope
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');
window.$ = window.jQuery = require('jquery');
require('jquery-ujs');

components.js.jsx looks like this:

var app = window.app = global.app = {};
var ReactDataGrid = require('./components/react_data_grid.js');
app.ReactDataGrid = ReactDataGrid;

//= require_tree ./components

(I moved the require_tree to the bottom, you don't mention it)

I've not tried to actually load the component on a page yet, I get this error as sprockets tries to compile the assets. I also tried reordering the requires in various ways by always get browserify complaining about certain files being missing.

Any ideas where I went wrong?

[gauravtiwari]

@awe2m2n2s You could also use rails-assets.org. which provides a lot of javascript packages bundled for Sprockets. React leaflet isn't available on rails-assets so I created it by pushing it to Bower. You could go to rails-assets.org and then search react-leaflet, select a version and then install it using your Gemfile. Then you could just include via Sprockets in your application.js.

source 'https://rails-assets.org' do
  gem 'rails-assets-react-leaflet'
end