Module Build Failed - Webpack, De Réagir, De Babel

J'ai été à la suite d'un tutoriel vidéo du pluriel de vue. Nom du cours est "la Construction en temps Réel d'Application à Réagir, Flux, Webpack, et Firebase".

Veuillez voir ci-dessous le code et le joint capture d'écran du problème que j'ai. Webpack est un échec lorsque j'ai jamais essayer de re construire les fichiers. Quelqu'un peut-il svp aviser de ce que le problème pourrait être. Je suis actuellement en utilisant toutes les dernières bibliothèques.

Module Build Failed - Webpack, De Réagir, De Babel
Module Build Failed - Webpack, De Réagir, De 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"
}
}
Il peut être avec les output: { filename: ./public/[name].js}. Essayez d'ajouter une autre touche pour le chemin: path: './public'. Mais je vois aussi que votre main est main.js en attendant, vous avez votre code dans app.jsx. Avez-vous import App from './components/app.jsx';?
ce qui vous fait penser à qui est la question. Le problème a commencé après que j'ai ajouté Réagir code. Veuillez voir ci-joint capture d'écran de mon fichier de répertoire
J'ai aussi vu un point-virgule manquant dans le render()'s return (); Et un point-virgule manquant dans this.state = {}
Oui, je ne vois pas la barre de défilement, la main.js est caché de la vue.
Venez d'ajouter le point-virgule sur le type de retour. Toujours le même problème.

OriginalL'auteur Erkan Demir | 2015-11-10

  1. 12

    Il a été résolu. La réponse était dans l'installation de presets npm i --save babel-preset-es2015 babel-preset-react. Ensuite, l'ajout d'un autre élément clé dans la webpack.config.js, dans le chargeur: query: {presets: ['es2015', 'react'] }. Devriez être bon d'aller.

    OriginalL'auteur leocreatini

  2. 0

    J'ai essayé les étapes ci-dessus et suivi de nombreux blogs et sites pour cela, mais le problème était toujours là.Puis j'ai découvert que je travaillais avec webpack 4. Donc,
    après de longues recherches, j'ai découvert le blog de:

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

    Donc, j'ai suivi les étapes et découvert que le problème était toujours là.Puis, après de longues recherches, j'ai découvert que réagir dossier n'était pas présent dans mon dossier node_modules.Ensuite, j'ai suivi les étapes suivantes:

    1. Supprimer le package.verrouillage.fichier json.
    2. Exécuter npm install.
    3. Vérifier le dossier node_modules, vous allez maintenant voir le réagir dossier.
    4. Exécuter mnp commencer.
      Alors, mon problème a rectifié.

    OriginalL'auteur utkarsh bajpai