web-dev-qa-db-ja.com

browserify、gulp、react.jsを使用して「エラー：モジュールが見つかりません」を受信

だから私はReact.js、gulp、browserifyで遊んでいます。 main.jsファイルにモジュールが必要になるまで、すべてがうまく機能します。他のファイルのコンポーネント/モジュールは問題なく必要ですが（以下を参照）、main.jsファイルでコンポーネント/モジュールを要求しようとすると、gulp serveの実行時に次のエラーが表示されます。

エラー：/ Users/kevin/Documents/MyWork/web/react/node_modules/browserifyで「/ Users/kevin/Documents/MyWork/web/react/app/src/js」からモジュール「./components/Feed」が見つかりません/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）

Require（Feed.js）ステートメントをmain.jsから削除すると、すべてがコンパイルされ、適切なdistフォルダーに入れられて正常に実行されます（react.jsがモジュールの欠落について不平を言っている場合を除き、コース）。

まず、私のフォルダー構造は次のようになります。

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

私のgulpfileは次のようになります：

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

Main.jsファイルは次のようになります。

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

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

Feed.jsファイルは次のようになります。

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;

私は本当に簡単なものを見落としていると確信しています...しかし、私はこれに何時間もいたので、それをクラックすることはできないようです。どんな助けも大歓迎です。 （明らかに、できるだけ簡潔にするために他のコンポーネントのコードを投稿していません...しかし、それらは問題ではありません）。

javascriptnode.jsgulpreactjsbrowserify
14
kevindeleon

あなたのファイル名はあなたが思っているものではありません。これに注意してください：

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

Feed.jsファイルは、実際にはFeed.js<SPACE>です。 FeedForm.jsについても同じです。それらの名前を変更すると、サンプルリポジトリが正常にビルドされます。

29
loganfsmyth

コードで試してください：

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

ファイル拡張子（.jsx）を追加した直後に私の問題が解決しました

おかげでSulok

2
Sulok

クイックソリューションかもしれません。

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

スクリプトに* .jsxを追加します

0
Tarandeep Singh