javascript - Receiving 'Error: Cannot find module' using browserify, gulp, react.js

admin管理员组
文章数量:1130349

So I've been playing around with React.js, gulp and browserify. Everything works great until I try to require a module in my main.js file. I am requiring components/modules in other files with no problem (see below), but when I try to require one in my main.js file, I receive the following error when running gulp serve:

Error: Cannot find module './components/Feed' from '/Users/kevin/Documents/MyWork/web/react/app/src/js' at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:55:21 at load (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:69:43) at onex (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:92:31) at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:22:47 at Object.oncomplete (fs.js:107:15)

If I remove the require (for Feed.js) statement from main.js, everything compiles and gets put in the appropriate dist folder and runs fine (except for react.js complaining about a missing module, of course).

Firstly, my folder structure looks like this:

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

My gulpfile looks like this:

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']);

My main.js file looks like this:

var React = require('react'),
    Feed = require('./components/Feed');

React.renderComponent(
    <Feed />,
    document.getElementById('app')
);

The Feed.js file looks like:

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;

I'm sure I'm overlooking something really simple...but I've been at this for hours and can't seem to crack it. Any help would be greatly appreciated. (Obviously I'm not posting the code for the other components for the sake of being as brief as possible...but they aren't the problem).

Error: Cannot find module './components/Feed' from '/Users/kevin/Documents/MyWork/web/react/app/src/js' at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:55:21 at load (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:69:43) at onex (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:92:31) at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:22:47 at Object.oncomplete (fs.js:107:15)

Firstly, my folder structure looks like this:

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

My gulpfile looks like this:

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']);

My main.js file looks like this:

var React = require('react'),
    Feed = require('./components/Feed');

React.renderComponent(
    <Feed />,
    document.getElementById('app')
);

The Feed.js file looks like:

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;

Share Improve this question edited Mar 1, 2015 at 0:02 asked Feb 28, 2015 at 23:57 kevindeleon 1,9243 gold badges18 silver badges30 bronze badges

var Feed.js? Is that a typo? – elclanrs Commented Mar 1, 2015 at 0:00
Sorry...yes...corrected. – kevindeleon Commented Mar 1, 2015 at 0:02
2 Can you please create a github repo with all the code? I created a project with the code you provided and it built correctly. – SteveLacy Commented Mar 1, 2015 at 0:43
@SteveLacy Alright...github repo is here github.com/kevindeleon/react-test This is basically some test code from a lesson I found online, but that's the exact code that I am running on my system that is failing for me. OS X yosemite, if it makes any difference. – kevindeleon Commented Mar 1, 2015 at 1:12
@SteveLacy -- also...obviously one would need to run npm i to install all needed node_modules....but I assume anyone reading this already likely knows that. – kevindeleon Commented Mar 1, 2015 at 1:15

| Show 1 more comment

3 Answers 3

Sorted by: Reset to default 30

Your filenames are not what you think they are. Note this:

$ find app -type f | awk '{print "_"$0"_"}'
_app/dist/js/main.js_
_app/index.html_
_app/src/js/components/Feed.js _
_app/src/js/components/FeedForm.js _
_app/src/js/components/FeedItem.js_
_app/src/js/components/FeedList.js_
_app/src/js/components/ShowAddButton.js_
_app/src/js/main.js_

Your Feed.js file is actually Feed.js<SPACE>. Same for FeedForm.js. Renaming them makes your example repo build fine.

Please try with code:

var React = require('react');
var FeedForm = require('./FeedForm.jsx');
var ShowAddButton = require('./ShowAddButton.jsx');
var FeedForm = require('./FeedForm.jsx');
var FeedList = require('./FeedList.jsx');

My issues resolved just after adding file extention(.jsx)

Thanks Sulok

May be the Quick Solution is..

  "start": "watchify ./src/js/* ./src/jsx/*.jsx -v -t babelify -o ./build/app/bundle.js"

in your Script add *.jsx

Error: Cannot find module './components/Feed' from '/Users/kevin/Documents/MyWork/web/react/app/src/js' at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:55:21 at load (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:69:43) at onex (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:92:31) at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:22:47 at Object.oncomplete (fs.js:107:15)

Firstly, my folder structure looks like this:

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

My gulpfile looks like this:

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']);

My main.js file looks like this:

var React = require('react'),
    Feed = require('./components/Feed');

React.renderComponent(
    <Feed />,
    document.getElementById('app')
);

The Feed.js file looks like:

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;

Error: Cannot find module './components/Feed' from '/Users/kevin/Documents/MyWork/web/react/app/src/js' at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:55:21 at load (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:69:43) at onex (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:92:31) at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:22:47 at Object.oncomplete (fs.js:107:15)

Firstly, my folder structure looks like this:

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

My gulpfile looks like this:

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']);

My main.js file looks like this:

var React = require('react'),
    Feed = require('./components/Feed');

React.renderComponent(
    <Feed />,
    document.getElementById('app')
);

The Feed.js file looks like:

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;

Share Improve this question edited Mar 1, 2015 at 0:02 asked Feb 28, 2015 at 23:57 kevindeleon 1,9243 gold badges18 silver badges30 bronze badges

var Feed.js? Is that a typo? – elclanrs Commented Mar 1, 2015 at 0:00
Sorry...yes...corrected. – kevindeleon Commented Mar 1, 2015 at 0:02
2 Can you please create a github repo with all the code? I created a project with the code you provided and it built correctly. – SteveLacy Commented Mar 1, 2015 at 0:43
@SteveLacy Alright...github repo is here github.com/kevindeleon/react-test This is basically some test code from a lesson I found online, but that's the exact code that I am running on my system that is failing for me. OS X yosemite, if it makes any difference. – kevindeleon Commented Mar 1, 2015 at 1:12
@SteveLacy -- also...obviously one would need to run npm i to install all needed node_modules....but I assume anyone reading this already likely knows that. – kevindeleon Commented Mar 1, 2015 at 1:15

| Show 1 more comment

3 Answers 3

Sorted by: Reset to default 30

Your filenames are not what you think they are. Note this:

$ find app -type f | awk '{print "_"$0"_"}'
_app/dist/js/main.js_
_app/index.html_
_app/src/js/components/Feed.js _
_app/src/js/components/FeedForm.js _
_app/src/js/components/FeedItem.js_
_app/src/js/components/FeedList.js_
_app/src/js/components/ShowAddButton.js_
_app/src/js/main.js_

Your Feed.js file is actually Feed.js<SPACE>. Same for FeedForm.js. Renaming them makes your example repo build fine.

Please try with code:

var React = require('react');
var FeedForm = require('./FeedForm.jsx');
var ShowAddButton = require('./ShowAddButton.jsx');
var FeedForm = require('./FeedForm.jsx');
var FeedList = require('./FeedList.jsx');

My issues resolved just after adding file extention(.jsx)

Thanks Sulok

May be the Quick Solution is..

  "start": "watchify ./src/js/* ./src/jsx/*.jsx -v -t babelify -o ./build/app/bundle.js"

in your Script add *.jsx

本文标签：

版权声明：本文标题：javascript - Receiving 'Error: Cannot find module' using browserify, gulp, react.js - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://it.en369.cn/questions/1739018910a1621004.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Receiving &#39;Error: Cannot find module&#39; using browserify, gulp, react.js - Stack Overflow

3 Answers 3

3 Answers 3

更多相关文章

MySQL5.7.32 64位解压缩版 windows操作系统安装教程图解

Go 语言安装教程（Windows 系统）

计算机基础----32位操作系统和64位操作系统的区别

7zip下载、安装

将32位Windows10升级到64位版本的方法

windows下，python3.6 32位、64位共存及开发工具vscode配置

关于Windows 7 64位系统 HP M1319f 打印机无法扫描的解决办法

64位windows下安装eclipse及其所需32位版JDK详细教程

32位系统无法运行64位系统安装文件

计算机怎么弄64位,64位系统怎么装？安装64位系统教程

win7 32位与64位下载地址存档

VirtualBox或VM Ware只能安装32位系统的解决办法

matlab7.0 32位&amp;64位 下载和安装说明

Windows10 安装oracle 11gR2 client 32位的方法

VMcare 虚拟机 详细安装教程及解释（内含激活码）最新版本

【免费下载】 VNCViewer 注册码资源下载

【亲测免费】 Proxifer 安装包与注册码

【亲测免费】 抖音直播伴侣推流密钥获取工具使用教程

windows下载安装远程桌面工具RealVNC-Server教程(RealVNC_E4_6_1版带注册码)

Sublime 32位 激活码

发表评论

推荐文章

嘿，少年 办公中的你怎么找资源的呢

linux中文输入搜狗,Linux配置中文输入法（搜狗输入法）

Windows vs macOS：程序员设计师终极系统选择

老机焕新：精选Win10精简版系统下载推荐

用Python实现多国语言文章及URL网页在线自动翻译

热门文章

手机解锁root（手机解锁root软件）

系统未激活会影响到远程桌面连接和上网，是真的

conda 进入虚拟环境与退出

大白菜无法打开计算机硬盘,关于大白菜pe一键装机找不到硬盘怎么办的问题解答 情况一：分区不合理 解决方案：使用大白菜diskgenius工具...

华三·交换机与路由器的综合实验

打造一台kali nethunter系统手机，享受随时随地做渗透！记一次个人的全套配置流程

三星i8500刷机工具的使用方法与注意事项

Visual Studio 2010旗舰版下载网址

windows配置pip镜像

中文论文翻译成英文，该如何润色？（建议收藏）

最新文章

Sublime 32位 激活码

windows下载安装远程桌面工具RealVNC-Server教程(RealVNC_E4_6_1版带注册码)

【亲测免费】 抖音直播伴侣推流密钥获取工具使用教程

【亲测免费】 Proxifer 安装包与注册码

Royal TSX许可证密钥(6.x后所有版本都可以用)

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

WordPress get parent category taxonomy

Omit specific product categories from WooCommerce shortcode

Updating Posts table in database without overwriting user generated content

php - Use wp_get_recent_posts with search term

responsive - How to exclude an image size from the Wordpress srcset

javascript - Receiving 'Error: Cannot find module' using browserify, gulp, react.js - Stack Overflow

matlab7.0 32位&64位下载和安装说明

VMcare 虚拟机详细安装教程及解释（内含激活码）最新版本

【亲测免费】抖音直播伴侣推流密钥获取工具使用教程

Sublime 32位激活码

嘿，少年办公中的你怎么找资源的呢

大白菜无法打开计算机硬盘,关于大白菜pe一键装机找不到硬盘怎么办的问题解答情况一：分区不合理解决方案：使用大白菜diskgenius工具...

Sublime 32位激活码

【亲测免费】抖音直播伴侣推流密钥获取工具使用教程