Meteor + React: Can't get data from mongoDB Collection

I have a Meteor Application that I'm developing with React. I still have the autopublish package in my project (autopublish@1.0.7).

Here is my relevant code:

MainMenu.jsx

import React, { Component, PropTypes } from 'react'
import { Meteor } from 'meteor/meteor'
import { FlowRouter } from 'meteor/kadira:flow-router'
import { createContainer } from 'meteor/react-meteor-data'

import { ChatRooms } from '/imports/api/chatrooms.js'

export class MainMenu extends Component {
    render() {
        console.log(this.props.chatrooms)

        return (
            {/* Render stuff here is not part of the scope of this question */}
        )
    }
}

MainMenu.PropTypes = {
    chatrooms: PropTypes.array.isRequired
}

export default createContainer(() => {
    return {
        chatrooms: ChatRooms.find({}).fetch()
    }
}, MainMenu)

chatrooms.js

import { Mongo } from 'meteor/mongo'

export const ChatRooms = new Mongo.Collection('chatrooms')

The console.log(this.props.chatrooms) in the MainMenu Component always returns an empty array ([]).

There are definitely items in the Mongo Database because when I run the meteor mongo command in my console and type db.chatrooms.find({}); it returns the 3 items that I've inserted to test this all.

Anyone have any idea what I may be doing wrong here? Help would be much appreciated!

I've figured it out. I left out a crucial step of this whole process.

In my /server/main.js file I needed to add the following line which fixed everything:

import '../imports/api/chatrooms.js