J'ai utilisé Reactjs et webpack pour démarrer un projet, et lorsque j'exécute le "serveur de noeud" dans l'invite de commande, une erreur comme celle-ci se présente:
Et le chrome Explorer ouvert ouvert avec succès, mais aussi des problèmes comme suit:
Le github est: (github.com/Yangqin0607/gallery)
Voici le package.json
{
"private": true,
"version": "0.0.1",
"description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
"main": "",
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
"dist": "npm run copy & webpack --env=dist",
"lint": "eslint ./src",
"posttest": "npm run lint",
"release:major": "npm version major && npm publish && git Push --follow-tags",
"release:minor": "npm version minor && npm publish && git Push --follow-tags",
"release:patch": "npm version patch && npm publish && git Push --follow-tags",
"serve": "node server.js --env=dev",
"serve:dist": "node server.js --env=dist",
"start": "node server.js --env=dev",
"test": "karma start",
"test:watch": "karma start --autoWatch=true --singleRun=false"
},
"repository": "",
"keywords": [],
"author": "Your name here",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"chai": "^3.2.0",
"copyfiles": "^1.0.0",
"css-loader": "^0.23.0",
"eslint": "^3.0.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^6.0.0",
"file-loader": "^0.9.0",
"glob": "^7.0.0",
"isparta-instrumenter-loader": "^1.0.0",
"karma": "^1.0.0",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.0",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"minimist": "^1.2.0",
"mocha": "^3.0.0",
"null-loader": "^0.1.1",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.0.0",
"react-addons-test-utils": "^15.0.0",
"react-hot-loader": "^1.2.9",
"rimraf": "^2.4.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"core-js": "^2.0.0",
"normalize.css": "^4.0.0",
"react": "^15.0.0",
"react-dom": "^15.0.0"
}
}
Ce problème est lié au package react-hot-loader
. Vous utilisez une ancienne version qui repose sur la présence du fichier ReactMount.js
dans le dossier node_modules/react/lib
.
Il n’existe pas de solution simple mais vous avez quelques options:
Essayez de suivre les instructions ici: https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react (mais j'ai été malchanceux jusqu'à présent)
Supprimez le chargeur à chaud pour réagir (dans votre webpack.config
supprimez le chargeur 'react-hot'
)
Mettez à jour le paquet react-hot-loader
vers la version 3 (voici comment procéder: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915 ). Mais notez que ce paquet est en alpha depuis un moment ...
Restaurez votre version de réaction dans une version qui inclut le ReactMount.js
dans le dossier lib (15.0.1 avait l'habitude de ne pas savoir quand ce fichier était arrêté).
Mise à jour: React Hot Loader 3 est maintenant en version bêta avec un guide de mise à niveau plus complet: https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs # migration-to-30
Aucune des solutions ci-dessus n'a fonctionné pour moi . J'ai passé le reste de la journée dans un trou de lapin avec des problèmes/commentaires de github, en pesant le pour/le contre/la faisabilité de diverses solutions de contournement.
Le correctif le plus rapide et le plus simple: "Je veux juste travailler sur le problème initial sur lequel je voulais travailler aujourd'hui" vient de: https://github.com/gaearon/react-hot-loader/issues/ 417 # issuecomment-261548082
Dans la configuration de votre pack Web, ajoutez l'alias suivant à la section resolve
:
resolve: {
alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
}
Pas est une solution stable à long terme. Il ne s'agit que d'une solution de développement qui vous permet de continuer à développer sans être obligé de gérer les problèmes de mise à niveau de manière inattendue.
Je ne suis toujours pas sûr à 100% de la raison pour laquelle je vois ce problème dans mon application, et non dans une autre, les deux ont été générés à partir du générateur fountain.js
react-redux et ont un code package.json
identique.
Vous utilisez un package react-hot-loader
obsolète qui utilise l’API de réaction interne par le biais de react\lib\ReactMount
. Maintenant, réagir ne permet pas cela d'où le problème.
Essayez de le mettre à jour avec la dernière version:
$ npm install --save-dev react-hot-loader@latest
Merci pour toutes vos réponses. J'ai résolu mes problèmes.
"Ce problème est lié au package react-hot-loader. Vous utilisez une ancienne version reposant sur le fichier ReactMount.js présent dans le dossier node_modules/react/lib." dit par cheesemacfly.
Donc, voici la solution pour moi: 1) mettre à jour le react-hot-loader à la dernière version
npm install --save-dev react-hot-loader@latest
mais voici un autre problème lié à react-hot-loader
2) j'ai donc supprimé le chargeur réactif à chaud de 'cfg/dev.js' Changer le code
loader: 'react-hot!babel-loader'
dans
loader: 'babel-loader'
J'ai eu le même problème et aucune de la solution n'a fonctionné. Il m'est alors apparu qu'il semblait que la réaction manquait. J'ai eu le problème après avoir installé et désinstallé un paquet pour postgreSQL.
Alors je l'ai ajouté. PS, j'utilisais du fil
yarn add react
C'est probablement juste un problème de dépendance. Il ne s'agit pas d'obtenir la version correcte de react ou de ne pas l'installer correctement.
# update npm
$ npm install -g npm
# reinstall the generator-react-webpack package (note the global tags)
$ npm install -g yo
$ npm install -g generator-react-webpack
Puis essayez de générer votre application.
Un grand merci à cheesemacfly, j’ai pu résoudre le même problème avec votre suggestion de supprimer le mot-clé «réactif» du chargeur.
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel'],
exclude: /(node_modules|lib\/ckeditor)/
}
Je suis passé à:
{
test: /\.(js|jsx)$/,
loader: 'babel',
exclude: /(node_modules|lib\/ckeditor)/
}
N'oubliez pas de changer le mot "chargeurs" en "chargeur" puisque vous ne faites plus référence à une liste.
Il y a deux problèmes en jeu:
webpack v. 3.11.0
, NE PAS mettre à niveau vers webpack v. 4.00
,React v. 15.6.2
.Ouvrez package.json
, qui aura une liste de choses comme ...
"dependencies": {
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10",
"webpack": "^3.6.0"
(etc.)
Puis exécutez une commande comme celle-ci dans le répertoire de base de votre paquet, qui a les mêmes dépendances que celles énumérées ci-dessus ...
Sudo npm install --save [email protected] [email protected] react-scripts@latest [email protected] jquery@latest jquery-ui@latest
TLDR REPONSE: ^^^ C'est la seule commande dont vous aurez réellement besoin pour exécuter.
Notez la version spécifique au webpack.
Après cela, tout a fonctionné pour moi! J'ai vérifié la version de ReactJS en utilisant cette réponse, https://stackoverflow.com/a/36994601/2430549 , et mon package.json ressemble maintenant à ...
"dependencies": {
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.2.0",
"react-scripts": "^1.1.4",
Source: Réponse de JanTheHun, https://github.com/angular/angular-cli/issues/9793
La mise à jour de react-hot-loader
n'a pas fonctionné pour moi, mais la suppression du react-hot
dans la liste des chargeurs, simplement en la commentant, a résolu le problème suivant:
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
// 'react-hot',
'babel'
]
}