can't find ./mongo when i browserify

Question

I'm dipping my feet in a node + mongoose + react + reflux app.

I'm also trying to create my first isomorphic app. But when i browserify the whole thing i get the following error

Running "browserify:client" (browserify) task
>> Error: Cannot find module './mongo' from 'project_folder/node_modules/mongoose/node_modules/mquery/lib/collection'

This problem happens the moment i require('mongoose') somewhere

I assume this is because mongoose can't work on clientside? But i have no idea how i should populate a (Re)Flux store?

Here is a snippet of the store i'm defining (mongoose is already connected to mongo in another file and when i don't browserify i do get the output)

var Reflux=require('reflux');
var mongoose=require('mongoose');

var _snippets=[];

var snippetSchema = new mongoose.Schema({
    title: String,
    data: String
});
var Snippet = mongoose.model('Snippet', snippetSchema);

var SnippetStore = Reflux.createStore({

    init: function() {
        Snippet.find(function(err, snippets) {
            _snippets = snippets;
        });
    },


    getSnippets:function() {
        return Snippet.find(function(err, snippets) {
            if (err) return console.error(err);
            return snippets;
        });
    }

});

module.exports=SnippetStore;

Yeah i thinking about going that way. But node.js is still new to me. So i should make some rest api where i do my mongoose logic. And from my store i do an Ajax call to the Api? I found this tutorial which i'm checking out now http://www.htmlxprs.com/post/20/creating-isomorphic-apps-with-react-and-nodejs — dewil_de, Oct 26 '14 at 21:14

Spoike · Answer 1 · 2014-10-27T14:18:48.580

AFAIK you can't run mongo client side. You need to do some client-side to server-side ajax stuff.

Passing props to the app

Pro-tip for isomorphic JS is to initiate the app (i.e. the top-most components) with initial props, and continue populating it client-side with flux/reflux/whatever via ajax calls to your server-side.

There are several ways to push initial props to your app. You let the server render the props, e.g. in a script tag (pseudo-code follows):

// Server-side: Put initial props on the template
<script id="reactprops">
    { JSON.stringify(initialProps) }
</script>

...as well as rendering the app out on the template with:

// Server-side: Render component
React.renderComponentToString(AppComponent(initialProps))

The client side should then pick up the props e.g. if you have a script tag with id reactprops you can get them with:

// Client-side: Pick up props on #reactprops
var props = JSON.parse(document.getElementById('reactprops').innerHTML);

... and then run the props with:

// Client-side: Render component
React.renderComponent(AppComponent({initialProps: props}));

Passing props to the Reflux Stores

Furthermore your App needs to initiate the stores, which is easily done through componentDidMount in your app component. You can pass on the initial props it receives to your reflux stores like this:

// You need to create an action that is called when the App has mounted
var Actions = createActions(['appDidStart' /* snip-snip */]);

var App = React.createClass({
    componentDidMount: function() {
        Actions.appDidStart(this.props.initialProps);
    },
    render: function() { /* snip-snip */ }
});

Meanwhile in your stores you need to listen to the appDidStart action, like this:

var SnippetsStore = Reflux.createStore({
    init: function() {
        this.listenTo(Actions.appDidStart, this.onLoad);
    },
    onLoad: function(initialProps) {
        /* do something with initialProps */
    },
    /* snip-snip */
});

Hope this makes sense to you.

Thx for providing a nice example. I started going this way. Now i created an API which gets my models and in my store i just do a call to the API instead of trying to use mongoose directly. I'll have to take a look at react-async. Only thing i'm wondering doesn't this slow things down? calling an API instead of going directly. — dewil_de, Oct 29 '14 at 10:31
I know [Meteor](https://www.meteor.com/) has a convenience wrapper for mongodb api but I haven't tested it yet myself in a React app (if it is even possible). — Spoike, Oct 29 '14 at 11:45

can't find ./mongo when i browserify

1 Answers1

Passing props to the app

Passing props to the Reflux Stores