2015-07-13 16 views
8

cercato di utilizzare il modulo NPM reagire-spin, ma quando provo e costruire un bundle.js con webpack, ricevo il seguente errore:Webpack con reagiscono moduli dando inaspettato gettone

Module parse failed: /Users/nir/browsewidget/node_modules/react-spin/src/main.js Line 29: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| render: function() { 
|  return (
|  <span ref="container" /> 
| ); 
| } 
@ ./js/widget.jsx 4:14-35 

sto indovinando che questo modulo ha jsx, ma non capisco perché non possa essere costruito? Lo spin di reazione richiede qualche configurazione extra quando si costruisce un bundle?

Ecco il mio pieno webpack.config.js:

module.exports = { 
    entry: "./js/widget.jsx", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
        test: /\.jsx$/, 
        loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
      } 
     ] 
    }, 
    externals: { 
     //don't bundle the 'react' npm package with our bundle.js 
     //but get it from a global 'React' variable 
     'react': 'React' 
    }, 
    resolve: { 
     extensions: ['','.js','.jsx'] 
    } 
}; 

risposta

16

loader è configurato per trasformare solo i file che terminano in .jsx:

test: /\.jsx$/, 

(Il simbolo del dollaro significa finale di stringa.)

È possibile cambiarlo in

per trasformare entrambi i file .js e .jsx, ma l'esecuzione di ogni file JavaScript in node_modules tramite il caricatore JSX sarà probabilmente piuttosto lenta.

Credo che si dovrebbe essere in grado di impostare un'opzione exclude di /node_modules/ e poi un'opzione include per il modulo specifico che ti interessano (react-spin), ma la soluzione migliore è che i pacchetti non usano JSX nella versione pubblicata del JavaScript -L'autore di react-spin potrebbe essere aperto a una richiesta di pull per questo effetto. (Edit: sembra che ci sia già una, vedi thomasboyt/react-spin#3)

Infine, react-spinis very small, in modo da prendere in considerazione l'uomo attuazione da soli nel vostro progetto (in modo che non devi preoccuparti di problemi webpack loader).

+0

Grazie, hai fatto un buon punto. Ho finito per includere la mia reazione nel mio progetto. – ApathyBear

Problemi correlati