Require files with browserify

[adoseofjess]

I have a React component and added browserify-rails gem to require files.

"use strict";

var add = require('./greeter');

var Map = React.createClass({

  render: function() {
    return <div><h1>Testing out the react component!</h1>

    </div>;
  }
});

And I get this error:

Uncaught TypeError: undefined is not a function

   // Initialize the public class
    var inst = new Component(publicProps, publicContext);

    if ("production" !== "development") {
      // This will throw later in _renderValidatedComponent, but add an early
      // warning now to help debugging

[rmosolgo]

when do you get that error?

[adoseofjess]

I get it when I load index.html.erb where I'm including this React component.

[rmosolgo]

Is Map accessible in the global scope? The react_component helper can only find objects from the global scope.

To add Map to the global scope, assign window.Map = Map

If that doesn't help please share:

• react-rails version
• the .erb file (or at least the react_component call)
• application.js (or however you're building JS for the page)
• What file does this error occur in?
• screenshot & stacktrace of the error

[adoseofjess]

The react_component is finding the Map component, but it's the var add = require('./greeter'); that throws this error.

[adoseofjess]

What is the recommended way to require external libraries with react-rails?

[rmosolgo]

react-rails supports Sprockets only :) //= require vendor/my_external_library

see some existing issues for discussion of react-rails + require, eg #129

[adoseofjess]

So I should move the folders from node_modules to vendor?

[klebershimabuku]

@adoseofjess I think it is the way you require and not about the file location.

Try something like:
//= require path/to/your_lib/greeter

instead of:

var add = require('./greeter');

[serv]

In addition to what others said,

you need to add node_modules into your asset compilation path.

In application.rb, add

config.assets.paths << Rails.root.join('node_modules')

Restart the rails server.

Now you can do something like

//= require lodash/lodash

[rescribet]

@adoseofjess I've created a very basic demo repo showing server side rendering with browserify-rails and react-rails.

After some fighting against sprockets, the configuration supports the var add = require('./greeter'); syntax (the newer import syntax also seems to work, although I haven't tested it yet).

In my own project, I've modified react_ujs to store the components in a non-global variable if require is available (in addition to some directory walking to flatten the folder structure).

[tdmckinn]

thanks @Fletcher91 exactly what I was looking for to get started using imports browserify and react with rails

[towry]

@adoseofjess You can use this gem webpackrails, and here is an example on how to use it webpackrails-example. It works with react-rails >= 1.1.0.

[goldnuggets24]

@Fletcher91 you are amazing, thank you soooo much for your help! I used your test app to construct my own integration of material-ui with a Rails project. I'm sure I did some things wrong here, but if it helps anyone else, please feel more than free to borrow from my repo.

[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.