Empfangen "Fehler: Kann Modul nicht finden" mit browserify, Schluck, react.js

Question

So habe ich mit React.js herumspielen, schlucken und browserifizieren. Alles funktioniert gut, bis ich versuche, ein Modul in meiner main.js Datei zu verlangen. Ich erfordern Komponenten/Module in anderen Dateien ohne Probleme (siehe unten), aber wenn ich versuche, in meiner main.js-Datei zu benötigen, erhalte ich die folgende Fehlermeldung, wenn gulp serve ausgeführt wird:

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)

Wenn ich entferne die erforderlich (für Feed.js) Anweisung von main.js, alles kompiliert und wird in die entsprechenden dist Ordner und läuft gut (außer react.js beschweren sich über ein fehlendes Modul, natürlich).

Erstens sieht meine Ordnerstruktur wie folgt:

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

Meine gulpfile wie folgt aussieht:

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

Meine main.js Datei sieht wie folgt aus:

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

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

Die Die Datei Feed.js sieht folgendermaßen aus:

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; 

Ich bin mir sicher, dass ich etwas wirklich einfaches übersehen habe ... aber ich bin schon seit Stunden hier und kann es anscheinend nicht knacken. Jede Hilfe würde sehr geschätzt werden. (Offensichtlich poste ich den Code für die anderen Komponenten nicht, um so kurz wie möglich zu sein ... aber sie sind nicht das Problem).

Answer 1

Ihre Dateinamen sind nicht, was Sie denken, dass sie sind. Beachten Sie dies:

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

Ihre Feed.js Datei tatsächlich Feed.js<SPACE> ist. Dasselbe gilt für FeedForm.js. Wenn Sie sie umbenennen, wird Ihr Beispiel zu einem Repo-Build.

Answer 2

Bitte versuchen Sie es mit dem 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'); 

Meine Probleme gelöst kurz nach Dateierweiterung Zugabe (.jsx)

Dank Sulok

Answer 3

Kann die schnelle Lösung sein wird ..

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

in Ihrem Skript hinzufügen * .jsx