React package breaks mini-mongo.

[thatgibbyguy]

I posted this over on stackoverflow but I'm starting to feel this may be a bug with the react package itself.

The error occurs as soon as I create a new react class.

Example code that keeps mini-mongo in tact

Template.home.helpers({
    homeReact() {
        return 'some string'
    }
})

<template name="home">
    <section class="home-hero">
        <h1>ply</h1>
        {{homeReact}}
    </section>
</template>

Example code that breaks the app

Template.home.helpers({
    homeReact() {
        homeContent = React.createClass({
            mixins: [ReactMeteorData],
            getMeteorData() {
                return {
                    homeData: homeContent.find({}).fetch()
                }
            },
            render(){
                return (
                    <div className="units-container">
                        <div className="units-row centered-content stacked">
                            <h1>name</h1>
                                                       <p>{this.data.homeData.homeCopy}</p>
                        </div>
                    </div>
                )
            }
        })

        return homeContent
    }
})

<template name="home">
    <section class="home-hero">
        <h1>ply</h1>
        <div>
            {{> React component=homeReact}}
        </div>
    </section>
</template>

Essentially the issue is that I simply cannot create a react component without breaking mini-monogo. Once I implement a react component - with or without reactive data - I will always receive the following errors:

Exception from Tracker afterFlush function: undefined TypeError: homeContent.find is not a function

[stubailo]

homeContent.find({}).fetch()

This line is causing the error. homeContent is the React component you just defined, not a collection.

Also, you should define the React component outside of the helper to avoid redefining it every time the helper re-runs.

[thatgibbyguy]

What an obvious mistake, thanks sir.