接收'错误:找不到模块'使用browserfy、gullow、react.js

所以我一直在玩React.js、gullow和browserfy。在我尝试在main.js文件中需要一个模块之前，一切都很好。我要求其他文件中的组件/模块没有问题（见下文），但当我试图在main.js文件中要求一个组件/模块时，我在运行gulp serve时收到以下错误：

错误：找不到模块"/组件/馈送'/Users/kevin/Documents/MyWork/web/reflect/app/src/js'在/Users/kevin/Documents/MyWork/web/areact/nod_modules/browsrify/node_modules/resolve/lib/async.js:55:21加载时（/Users/kevin/Documents/MyWork/web/react/nod_modules/browsrify/node_modules/resolve/lib/async.js:69:43）在onex（/Users/kevin/Documents/MyWork/web/reflect/nod_modules/browsrify/node_modules/resolve/lib/async.js:92:31）在/Users/kevin/Documents/MyWork/web/react/nod_modules/browsrify/node_modules/resolve/lib/async.js:22:47在Object.oncomplete（fs.js:107:15）

如果我从main.js中删除require（for Feed.js）语句，那么所有内容都会编译并放入相应的dist文件夹中，并且运行良好（当然，除了react.js抱怨缺少模块）。

首先，我的文件夹结构如下：

app
│-- gulpfile.js
│-- package.json
│
└───src
│   │
│   ├───js
│       │-- main.js
│       └───components
│            │-- Feed.js
│            │-- FeedList.js
│            │-- FeedItem.js
│            │-- FeedForm.js
│            │-- ShowAddButton.js
│            └
│   
└───dist

我的gulpfile看起来是这样的：

var gulp = require('gulp'),
    connect = require('gulp-connect'),
    open = require("gulp-open"),
    browserify = require('browserify'),
    reactify = require('reactify'),
    source = require("vinyl-source-stream"),
    concat = require('gulp-concat'),
    port = process.env.port || 3031;
// browserify and transform JSX
gulp.task('browserify', function() {
    var b = browserify();
    b.transform(reactify);
    b.add('./app/src/js/main.js');
    return b.bundle()
        .pipe(source('main.js'))
        .pipe(gulp.dest('./app/dist/js'));
});
// launch browser in a port
gulp.task('open', function(){
    var options = {
        url: 'http://localhost:' + port,
    };
    gulp.src('./app/index.html')
    .pipe(open('', options));
});
// live reload server
gulp.task('connect', function() {
    connect.server({
        root: 'app',
        port: port,
        livereload: true
    });
});
// live reload js
gulp.task('js', function () {
    gulp.src('./app/dist/**/*.js')
        .pipe(connect.reload());
});
// live reload html
gulp.task('html', function () {
    gulp.src('./app/*.html')
    .pipe(connect.reload());
});
// watch files for live reload
gulp.task('watch', function() {
    gulp.watch('app/dist/js/*.js', ['js']);
    gulp.watch('app/index.html', ['html']);
    gulp.watch('app/src/js/**/*.js', ['browserify']);
});
gulp.task('default', ['browserify']);
gulp.task('serve', ['browserify', 'connect', 'open', 'watch']);

我的main.js文件如下：

var React = require('react'),
    Feed = require('./components/Feed');
React.renderComponent(
    <Feed />,
    document.getElementById('app')
);

Feed.js文件看起来像：

var React = require('react');
var FeedForm = require('./FeedForm');
var ShowAddButton = require('./ShowAddButton');
var FeedForm = require('./FeedForm');
var FeedList = require('./FeedList');
var Feed = React.createClass({
    getInitialState: function() {
        var FEED_ITEMS = [
            { key: '1', title: 'Just something', description: 'Something else', voteCount: 49 },
            { key: '2', title: 'Some more stuff', description: 'Yeah!', voteCount: 34 },
            { key: '3', title: 'Tea is good', description: 'yepp again', voteCount: 15 },
        ];
        return {
            items: FEED_ITEMS
        };
    },
    render: function() {
        return (
            <div>
                <div className="container">
                    <ShowAddButton />
                </div>
                <FeedForm />
                <br />
                <br />
                <FeedList items={this.state.items} />
            </div>
        );
    }
});
module.exports = Feed;

我确信我忽略了一些非常简单的事情。。。但我已经做了好几个小时了，似乎无法破解。如果有任何帮助，我将不胜感激。（显然，我发布其他组件的代码并不是为了尽可能简短……但它们不是问题所在）。