2015-02-28 43 views
14

Quindi ho giocato con React.js, gulp e browserify. Tutto funziona alla grande finché non provo a richiedere un modulo nel mio file main.js. Sto richiedendo componenti/moduli in altri file senza alcun problema (vedi sotto), ma quando provo a richiedere uno nel mio file main.js, ricevo il seguente errore durante l'esecuzione gulp serve:Ricezione 'Errore: impossibile trovare il modulo' utilizzando browserify, gulp, react.js

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)

Se rimuovo la richiedono (per Feed.js) dal main.js, tutto viene compilato e messo nella giusta cartella dist e gira bene (eccetto react.js che lamenta un modulo mancante, ovviamente).

In primo luogo, la mia struttura di cartelle simile a questa:

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

mio gulpfile si presenta così:

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

Il mio file main.js si presenta così:

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

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

Il Il file Feed.js ha il seguente aspetto:

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; 

Sono sicuro che sto trascurando qualcosa di veramente semplice ... ma sono stato a questo per ore e non riesco a decifrarlo. Qualsiasi aiuto sarebbe molto apprezzato. (Ovviamente non sto postando il codice per gli altri componenti al fine di essere il più breve possibile ... ma non sono il problema).

+0

'var Feed.js'? È un errore di battitura? – elclanrs

+0

Mi spiace ... sì ... corretto. – kevindeleon

+2

Puoi creare un repo github con tutto il codice? Ho creato un progetto con il codice che hai fornito e creato correttamente. – SteveLacy

risposta

29

I nomi dei file non sono quelli che si pensa siano. Nota questo:

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

Il file è in realtà Feed.jsFeed.js<SPACE>. Lo stesso per FeedForm.js. Rinominandoli, il tuo esempio repo va bene.

+2

Holy crap man ... grazie mille! Non ho idea di come sia successo. Mi hai salvato ore! Mi sento un goon. :( – kevindeleon

+4

Wow! Sono molto curioso di come l'hai notato :-) – FakeRainBrigand

+1

@FakeRainBrigand Se dovessi indovinare ... probabilmente ha appena avuto un'intuizione e poi ha eseguito il comando che ha lasciato sopra ('$ trova app -type f | awk '{print "_" $ 0 "_"}' ') per confermare. – kevindeleon

2

Si prega di provare con il codice:

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

miei problemi risolti solo dopo l'aggiunta di file di estensione (.jsx)

Grazie Sulok

+0

Spiegazione per favore ...? –

+0

la sua spiegazione è che è necessario specificare esplicitamente le estensioni di file. ha funzionato per me – s2t2

+0

@ s2t2 in gulpfile.js puoi specificare 'var bundler = browserify ({ voci: ['./scripts/jsx/app.jsx'], trasformare: [reactify], estensioni: ['.jsx'] , debug: true, cache: {}, packageCache: {}, fullPaths: true }); '** la proprietà estensioni è importante **, quindi è possibile rimuovere l'estensione .jsx – Jasmin

0

può essere la soluzione rapida è ..

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

nel tuo script aggiungere * .jsx

Problemi correlati