How use react components from npm in rails

Question

I am new in react and I follow this article https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers to use react in rails app and everything was fine. But later I wanted include in records.html page summernote (WYSIWYG html editor). I found this npm module react-summernote and can't make editor works.

This is my code (try 1):

• application.js

var ReactSummernote= window.ReactSummernote = global.ReactSummernote = require('react-summernote');

• index.html.erb

<%= react_component 'ReactSummernote'%>

This is my code (try 2):

• summernote.js.coffee

@RichTextEditor = React.createClass
  render: ->
    React.createElement ReactSummernote

• index.html.erb

<%= react_component 'RichTextEditor'%>

and got this error

react.self-e3251ec….js?body=1:1285 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Constructor .

Answer 1

Some things worth checking;

I'm assuming your node packages are being installed to /node_modules/* . Make sure those packages are being added to your asset pipeline. I've used browserify to accomplish this.

Check in your browser console to see if the variable is being set (just type ReactSummernote . The result should be a function if it is imported correctly, or undefined if there is some problem).

If you've gotten this far and are still stuck, I would recommend triggering the render without using react-rails. It's easy enough to render the component onload of your page through vanilla javascript, and if it's the react-rails gem that is causing you problems, this will navigate around it easily with something like this;

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);