web-dev-qa-db-fra.com

Réception du message "Erreur: Impossible de trouver le module" avec browserify, gulp, react.js

J'ai donc joué avec React.js, gulp et browserify. Tout fonctionne bien jusqu'à ce que j'essaie d'exiger un module dans mon fichier main.js. J'ai besoin de composants/modules dans d'autres fichiers sans aucun problème (voir ci-dessous), mais lorsque j'essaie d'en exiger un dans mon fichier main.js, le message d'erreur suivant s'affiche lors de l'exécution de gulp serve:

Erreur: Impossible de trouver le module './components/Feed' dans '/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 sur Object.oncomplete (fs.js: 107: 15)

Si je supprime l'instruction require (for Feed.js) de main.js, tout est compilé et placé dans le dossier dist approprié et fonctionne correctement (à l'exception de react.js qui se plaint d'un module manquant, bien sûr).

Tout d'abord, la structure de mon dossier ressemble à ceci:

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

Mon fichier gulp ressemble à ceci:

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

Mon fichier main.js ressemble à ceci:

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

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

Le fichier Feed.js ressemble à:

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;

Je suis sûr que je néglige quelque chose de très simple ... mais je suis dans cette situation depuis des heures et je n'arrive pas à comprendre. Toute aide serait grandement appréciée. (Évidemment, je ne publie pas le code des autres composants pour être aussi bref que possible ... mais ce n’est pas le problème).

javascriptnode.jsgulpreactjsbrowserify
14
kevindeleon

Vos noms de fichiers ne sont pas ce que vous pensez qu'ils sont. Notez ceci:

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

Votre fichier Feed.js est en réalité Feed.js<SPACE>. Idem pour FeedForm.js. Si vous les renommez, votre exemple de mise en pension est bien construit.

29
loganfsmyth

S'il vous plaît essayer avec le 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');

Mes problèmes résolus juste après l'ajout d'une extension de fichier (.jsx)

Merci Sulok

2
Sulok

Peut-être que la solution rapide est .. 

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

dans votre script, ajoutez * .jsx 

0
Tarandeep Singh