Modul Build Failed - Webpack, Reagieren, Babel

Ich war nach einem video-tutorial von plural Anblick. Natürlich name ist "Building a Real-time-App mit React, Flux, Webpack, und Feuerstellung".

Bitte sehen Sie die untenstehenden code und angehängten screen-shot von dem Problem, das ich habe. Webpack ist zu Versagen, wenn ich jemals versuchen, Sie erneut erstellen der Dateien. Kann jemand bitte beraten, was das Problem sein könnte. Ich bin derzeit mit all den neuesten Bibliotheken.

Modul Build Failed - Webpack, Reagieren, Babel
Modul Build Failed - Webpack, Reagieren, Babel

/*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"
 }
 }
  • Könnte es mit der output: { filename: ./public/[name].js}. Versuchen Sie, ein anderes key für path: path: './public'. Aber ich sehe auch, dass dein main main.js mittlerweile haben Sie Ihren code in app.jsx. Hast du import App from './components/app.jsx';?
  • was macht Sie denken, dass ist das Problem. Das Problem begann, nachdem ich Hinzugefügt Reagieren-code. Bitte siehe angehängten Screenshot meiner Datei Verzeichnis
  • Ich sah auch ein fehlendes Semikolon in der render()'s return (); Und ein fehlendes Semikolon in this.state = {}
  • Ja, ich wollte nicht sehen Sie die Bildlaufleiste, die main.js war von der Ansicht versteckt.
  • Soeben das Semikolon auf den Rückgabetyp. Immer noch das gleiche Problem.
  • es sieht aus wie es ist, beklagen ReactDOM.render(< - App/>, getElementById('container'));
  • Die beiden fehlenden? Ich denke, es ist einfach nicht korrekt kompilieren, wenn ja, wird der Fehler in der App.jsx macht das in nicht in main.js weil das log sagt.
  • Lassen Sie uns weiter, diese Diskussion im chat.
  • Das Semikolon fehlt noch in this.state = {};, versuchen Sie, hinzufügen, dass in App.jsx
  • Ich bin versuchen, auf die Verwendung der neuen version des Paket-in diesem Kurs auch, aber es hat viel problem, weil eine ganze Menge missbilligen Funktion in babel 6 (Beispiel alt ist decorators)

InformationsquelleAutor Erkan Demir | 2015-11-10
  1. 12

    Es wurde gelöst. Die Antwort lag in der Installation von presets npm i --save babel-preset-es2015 babel-preset-react. Dann das hinzufügen eines weiteren Schlüssel in der webpack.config.js, in den loader: query: {presets: ['es2015', 'react'] }. Sollten gut zu gehen.

    InformationsquelleAutor leocreatini
  2. 0

    Ich habe versucht, die obigen Schritte, und gefolgt von vielen blogs und Websites, aber das problem war immer noch da.Dann fand ich heraus, dass ich die Arbeit mit webpack 4. So,
    nach langer Suche fand ich heraus, das blog:

    https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75.

    Also, ich folgte den Schritten und fand heraus, dass das problem war immer noch da.Dann, nach langer Suche, fand ich heraus, dass reagieren Ordner nicht vorhanden war, in meinem node_modules-Ordner.Dann folgte ich der folgenden Schritte aus:

    1. Das Paket löschen.lock.json-Datei.
    2. Führen Sie npm install.
    3. Überprüfen Sie den node_modules-Ordner, sehen Sie nun reagieren Ordner.
    4. Führen Sie npm start.
      Dann, mein problem aber behoben werden.
    InformationsquelleAutor utkarsh bajpai
Schreibe einen Kommentar