web-dev-qa-db-fra.com

"module introuvable: erreur: impossible de résoudre le module 'react/lib/ReactMount'"

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:

 enter image description here

Et le chrome Explorer ouvert ouvert avec succès, mais aussi des problèmes comme suit:

 enter image description here

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"
  }
}
reactjswebpack
23
Ailsa

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:

  1. 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)

  2. Supprimez le chargeur à chaud pour réagir (dans votre webpack.config supprimez le chargeur 'react-hot')

  3. 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 ...

  4. 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

23
cheesemacfly

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.

7
rkd

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
6
ErwinGO

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  enter image description here

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'
3
Ailsa

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
2
Fatima Haidar

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.

2
Brad Bumbalough

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.

1
Lance Fono

Il y a deux problèmes en jeu:

  1. Mettre à niveau correctement toutes vos dépendances, et
  2. Utilisez webpack v. 3.11.0, NE PAS mettre à niveau vers webpack v. 4.00,
  3. Rétrograder ReactJS à 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

0
HoldOffHunger

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'
    ]
}
0
yaitloutou