Nhận 'Lỗi: Không thể tìm thấy mô-đun' bằng cách sử dụng browserify, gulp, react.js

Question

Vì vậy, tôi đã chơi xung quanh với React.js, gulp và browserify. Mọi thứ hoạt động tốt cho đến khi tôi cố gắng yêu cầu một mô-đun trong tệp main.js của tôi. Tôi yêu cầu các thành phần/modules trong các tập tin khác với không có vấn đề (xem dưới đây), nhưng khi tôi cố gắng để yêu cầu một trong tập tin main.js của tôi, tôi nhận được lỗi sau khi chạy 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)

Nếu tôi loại bỏ các yêu cầu (cho Feed.js) tuyên bố từ main.js, mọi thứ biên dịch và được đưa vào thư mục dist thích hợp và chạy tốt (ngoại trừ react.js phàn nàn về một mô-đun còn thiếu, tất nhiên).

Thứ nhất, cấu trúc thư mục của tôi trông như thế này:

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

gulpfile của tôi trông như thế này:

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

tập tin main.js của tôi trông như thế này:

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

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

Các Tệp Feed.js trông giống như:

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; 

Tôi chắc chắn rằng tôi đang nhìn thấy một cái gì đó thực sự đơn giản ... nhưng tôi đã ở đây trong nhiều giờ và dường như không thể crack nó. Mọi sự trợ giúp sẽ rất được trân trọng. (Rõ ràng là tôi không đăng mã cho các thành phần khác vì mục đích ngắn gọn nhất có thể ... nhưng chúng không phải là vấn đề).

Answer 1

Tên tệp của bạn không phải là những gì bạn nghĩ. Lưu ý:

$ 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_ 

Tệp Feed.js thực tế là Feed.js<SPACE>. Tương tự cho FeedForm.js. Đổi tên chúng làm cho ví dụ của bạn repo xây dựng tốt.

Answer 2

Vui lòng thử với mã:

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

vấn đề của tôi được giải quyết chỉ sau khi thêm tập tin gia hạn (.jsx)

Cảm ơn Sulok

Answer 3

Có thể là giải pháp nhanh là ..

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

trong Tập lệnh của bạn thêm * .jsx