2015-11-10 14 views
8

Stavo seguendo un video tutorial dalla vista plurale. Il nome del corso è "Creazione di un'app in tempo reale con React, Flux, Webpack e Firebase".Modulo non riuscito - Webpack, React, Babel

Si prega di vedere sotto il codice e la schermata allegata del problema che sto avendo. Webpack sta fallendo quando mai provo a ricostruire i file. Qualcuno può consigliare di quale potrebbe essere il problema. Attualmente sto usando tutte le ultime librerie.

enter image description here enter image description here

/*webpack.config.js*/ 

module.exports = { 
entry: { 
    main: [ 
     './src/main.js' 
    ] 
}, 
output: { 
    filename: './public/[name].js' 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel' 
     } 
    ] 
} 
} 



    /*App.jsx*/ 
    import React from 'react'; 

class App extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     messages: [ 
      'hi there how are you ?', 
      'i am fine, how are you ?' 
     ] 
    } 
} 

render() { 
    var messageNodes = this.state.messages.map((message)=> { 
     return (
      <div>{message}</div> 
     ); 
    }); 

    return (
     <div>{messageNodes}</div> 
    ); 
} 
} 

export default App; 

/*main.js*/ 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.jsx'; 

ReactDOM.render(<App/>, getElementById('container')); 

/*index.html*/ 
<!DOCTYPE html> 
<html> 
    <head> 
<title></title> 
<meta charset="utf-8" /> 
</head> 
<body> 
<div id="container"></div> 
<script src="public/main.js"></script> 
</body> 
</html> 

/*package.json */ 

{ 
"name": "reatapp", 
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1" 
}, 
"author": "", 
"license": "ISC", 
"dependencies": { 
"babel-core": "^6.1.2", 
"babel-loader": "^6.0.1", 
"babel-preset-react": "^6.1.2", 
"babelify": "^7.2.0", 
"react": "^0.14.2", 
"react-dom": "^0.14.2", 
"webpack": "^1.12.3" 
} 
} 
+0

Potrebbe essere con l'output: {nomefile: ./public/ [nome] .js} '. Prova ad aggiungere un'altra chiave per il percorso: 'percorso: './Pubblico''. Ma vedo anche che il tuo main è 'main.js' nel frattempo hai il tuo codice in' app.jsx'. Hai importato l'app da './components/app.jsx'; '? – leocreatini

+0

@LeoCreatini cosa ti fa pensare che questo è il problema. Il problema è iniziato dopo aver aggiunto il codice React. Si prega di vedere la schermata allegata della mia directory di file –

+0

Ho anche visto un punto e virgola mancante nel 'render()' 's 'return();' E un punto e virgola mancante in 'this.state = {}' – leocreatini

risposta

9

È stato risolto. La risposta è stata nell'installazione dei preset npm i --save babel-preset-es2015 babel-preset-react. Quindi aggiungere un'altra chiave nel file webpack.config.js, nel caricatore: query: {presets: ['es2015', 'react'] }. Dovrebbe essere buono per andare.

+1

Thx man. Esempi e tutorial diventano obsoleti molto velocemente. – Andrew

+0

ha funzionato anche per me. – fuLLMetaLMan

Problemi correlati