web-dev-qa-db-fra.com

Échec de la construction du module - Webpack, React, Babel

Je suivais un tutoriel vidéo du point de vue pluriel. Le nom du cours est "Construire une application en temps réel avec React, Flux, Webpack et Firebase".

Veuillez consulter le code ci-dessous et la capture d'écran ci-jointe du problème que je rencontre. Webpack échoue chaque fois que j'essaie de reconstruire les fichiers. Quelqu'un peut-il s'il vous plaît informer de ce que ce problème pourrait être. J'utilise actuellement toutes les dernières bibliothèques.

 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"
 }
 }
javascriptreactjswebpackbabeljsecmascript-7
8
Erkan Demir

C'était résolu. La réponse était en installant des presets npm i --save babel-preset-es2015 babel-preset-react. Puis en ajoutant une autre clé dans webpack.config.js , dans le chargeur: query: {presets: ['es2015', 'react'] }. Devrait être bon pour aller.

10
leocreatini

J'ai essayé les étapes ci-dessus et suivi de nombreux blogs et sites pour cela, mais le problème était toujours là. Ensuite, j'ai découvert que je travaillais avec Webpack 4. Ainsi, Après une longue recherche, j'ai découvert le blog:
https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75 .
J'ai donc suivi les étapes et découvert que le problème était toujours là. Puis, après une longue recherche, j'ai découvert que le dossier react n'était pas présent dans mon dossier node_modules.Ensuite, j'ai suivi les étapes suivantes: 

  1. Supprimez le fichier package.lock.json.
  2. Exécutez npm install.
  3. Vérifiez le dossier node_modules, vous verrez maintenant le dossier de réaction.
  4. Exécutez npm start. Ensuite, mon problème a été résolu.
0
utkarsh bajpai