8
Ich folgte ein Video-Tutorial aus Plural Sicht. Kursname lautet "Erstellen einer Echtzeit-App mit React, Flux, Webpack und Firebase".Modul Build fehlgeschlagen - Webpack, Reagieren, Babel
Bitte siehe unten Code und angehängten Screenshot der Frage, die ich habe. Webpack schlägt fehl, wenn ich versuche, die Dateien neu zu erstellen. Kann jemand bitte beraten, was das Problem sein könnte. Ich verwende derzeit die neuesten Bibliotheken.
/*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"
}
}
Es könnte mit dem 'output: {filename: ./public/ [name] .js}' sein. Versuchen Sie, einen weiteren Schlüssel für den Pfad hinzuzufügen: 'pfad: './Public''. Aber ich sehe auch, dass Ihr Hauptverzeichnis 'main.js' ist, während Sie Ihren Code in' app.jsx' haben. Hast du 'App von 'importiert ./components/app.jsx';'? – leocreatini
@LeoCreatini Was lässt dich denken, dass das Problem ist. Das Problem begann, nachdem ich den React-Code hinzugefügt hatte. Bitte siehe angehängten Screenshot meines Dateiverzeichnisses –
Ich sah auch ein fehlendes Semikolon in der 'render()' 'return();' Und ein fehlendes Semikolon in 'this.state = {}' – leocreatini