wake-up-neo.com

'Fehler: Modul kann nicht gefunden werden' mithilfe von browserify, gulp, react.js

Also habe ich mit React.js rumgespielt, getrunken und mit Browser. Alles funktioniert gut, bis ich versuche, ein Modul in meiner main.js-Datei zu benötigen. Ich benötige Komponenten/Module in anderen Dateien ohne Probleme (siehe unten), aber wenn ich versuche, eines in meiner main.js-Datei anzufordern, wird beim Ausführen von gulp serve die folgende Fehlermeldung angezeigt:

Fehler: Das Modul './components/Feed' kann nicht unter .__ gefunden werden. '/Users/kevin/Documents/MyWork/web/react/app/src/js' um /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) unter /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:22:47 bei Object.oncomplete (fs.js: 107: 15)

Wenn ich die required (für Feed.js) -Anweisung aus main.js entferne, wird alles kompiliert und in den entsprechenden dist-Ordner abgelegt und läuft einwandfrei (abgesehen von reag.js, der sich natürlich über ein fehlendes Modul beschwert).

Erstens sieht meine Ordnerstruktur folgendermaßen aus:

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

Mein Gulpfile sieht so aus:

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 folgendermaßen aus:

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

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

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 sicher, ich übersehe etwas wirklich einfaches ... aber ich bin schon seit Stunden dabei und kann es nicht knacken. Jede Hilfe wäre sehr dankbar. (Natürlich poste ich den Code für die anderen Komponenten nicht, um so kurz wie möglich zu sein ... aber sie sind nicht das Problem).

14
kevindeleon

Ihre Dateinamen sind nicht so, wie Sie glauben. 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 ist tatsächlich Feed.js<SPACE>. Gleiches für FeedForm.js. Wenn Sie diese umbenennen, ist Ihr Beispiel für das Repo-Build gut.

29
loganfsmyth

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 wurden direkt nach dem Hinzufügen der Dateierweiterung (.jsx) behoben.

Danke Sulok

2
Sulok

Kann die Schnelllösung sein .. 

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

fügen Sie in Ihrem Skript * .jsx hinzu 

0
Tarandeep Singh