Je suis nouveau dans le codage et j'ai des problèmes avec pourquoi je ne peux plus configurer React correctement. J'ai eu du mal la semaine dernière et j'ai finalement réussi. Mais maintenant, j'ai à nouveau eu le même problème et rien ne fonctionne.
J'ai un projet que j'ai commencé avec npx create-react-app , puis quand je suis entré dans le projet, je suppose que ce problème:
Il peut y avoir un problème avec l'arborescence des dépendances du projet. Ce n'est probablement pas un bogue dans Create React App, mais quelque chose que vous devez corriger localement.
Le package react-scripts fourni par Create React App nécessite une dépendance:
"webpack": "4.29.6"
N'essayez pas de l'installer manuellement: votre gestionnaire de paquets le fait automatiquement. Cependant, une version différente de webpack a été détectée plus haut dans l'arborescence:
/ Users / aliceparker / node_modules / webpack (version: 4.33.0)
L'installation manuelle de versions incompatibles est connue pour causer des problèmes difficiles à déboguer.
Si vous préférez ignorer cette vérification, ajoutez SKIP_PREFLIGHT_CHECK = true à un fichier .env de votre projet. Cela désactivera définitivement ce message, mais vous pourriez rencontrer d'autres problèmes.
Pour corriger l'arborescence de dépendances, essayez de suivre les étapes ci-dessous dans l'ordre exact:
- Supprimez package-lock.json (pas package.json!) Et / ou yarn.lock dans votre dossier de projet.
- Supprimez node_modules dans votre dossier de projet.
- Supprimez "webpack" des dépendances et / ou devDependencies dans le fichier package.json du dossier de votre projet.
- Exécutez npm install ou yarn, selon le gestionnaire de packages que vous utilisez.
Dans la plupart des cas, cela devrait suffire à résoudre le problème. Si cela n'a pas aidé, il y a quelques autres choses que vous pouvez essayer:
Si vous avez utilisé npm, installez yarn ( http://yarnpkg.com/ ) et répétez les étapes ci-dessus avec lui à la place. Cela peut aider car npm a des problèmes connus avec le levage de paquets qui pourraient être résolus dans les versions futures.
Vérifiez si / Users / aliceparker / node_modules / webpack est en dehors du répertoire de votre projet. Par exemple, vous avez peut-être accidentellement installé quelque chose dans votre dossier de départ.
Essayez d'exécuter npm ls webpack dans votre dossier de projet. Cela vous indiquera quel autre paquet (en dehors des scripts de réaction attendus) a installé le webpack.
Si rien d'autre ne vous aide, ajoutez SKIP_PREFLIGHT_CHECK = true à un fichier .env dans votre projet. Cela désactiverait définitivement cette vérification en amont au cas où vous voudriez continuer de toute façon.
PS Nous savons que ce message est long mais veuillez lire les étapes ci-dessus :-) Nous espérons que vous les trouverez utiles!
J'ai suivi les étapes ci-dessus. Obtenez toujours le problème. J'ai également désinstallé Webpack dans le monde entier et l'ai réinstallé.
Voici à quoi ressemble mon fichier package.json:
`{
"name": "ravenous-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}`
Quelqu'un peut-il gentiment me guider pour résoudre ce problème? (Ps. J'ai juste essayé de créer un nouveau projet, mais j'ai le même problème ...)
12 Réponses :
Le problème est le Webpack installé dans votre répertoire utilisateur. Retirez-le avec npm ou à la main et tout devrait bien fonctionner: ref: https://github.com/facebook/create-react-app/issues/6120
Merci, comment puis-je le supprimer de mon répertoire d'utilisateurs? Tout cela est un peu au-dessus de ma tête!
Oui, qui a été installé avec l'indicateur npm install ... -g , ceci est en conflit avec votre installation locale
Vous pouvez suivre les instructions données dans le journal des erreurs.
Supprimez node_modules dans votre dossier de projet.
Supprimez "webpack" des dépendances et / ou devDependencies dans le fichier package.json du dossier de votre projet.
Merci. J'ai déjà essayé ces étapes, mais soyez clair, je n'étais pas sûr d'avoir bien fait l'étape 3. Comment faire exactement ça?
ouvrez package.json, sous dépendances ou devDependencies, supprimez la référence à webpack.
Il n'y a aucune référence au webpack là-bas. "Dependencies": {"react": "^ 16.8.6", "react-dom": "^ 16.8.6", "react-scripts": "3.0.1" },
Dans le terminal, exécutez:
cd ~
Ensuite:
ls
Vous devriez voir une liste de fichiers. Si node_modules est inclus dans cette liste (comme il semble qu'il devrait l'être), vous souhaitez supprimer ce dossier. Vous pouvez le faire dans le terminal comme ceci:
rm -rf node_modules
Mais gardez à l'esprit: cela n'enverra pas le dossier à la corbeille. Il le supprimera irrévocablement. rm -rf est une commande puissante. Si cela vous rend nerveux, tapez open . au lieu. Cela ouvrira votre répertoire "home" ( ~ ) dans le Finder, et vous pourrez supprimer node_modules de la manière habituelle, clic droit, envoyer à la corbeille.
J'espère que ça t'as aidé!
Recevez-vous les mêmes messages d'erreur que dans le message d'origine? Ou quelque chose de différent? Edit: Avez-vous cd dans le répertoire du projet avant d'exécuter npm start ?
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-app@0.1.0 start: react react-scripts start npm ERR! Statut de sortie 1 npm ERR! npm ERR! Échec du script de démarrage react-app@0.1.0. npm ERR! Ce n'est probablement pas un problème avec npm. Il y a probablement une sortie de journalisation supplémentaire ci-dessus. npm ERR! Un journal complet de cette exécution peut être trouvé dans: npm ERR! /Users/alice/.npm/_logs/2019-06-10T14_56_11_380Z-debug.log Alices-MBP-7: react-app alice $
Hm, peut-être que ce fil vous aidera: stackoverflow.com/questions/42308879/npm-err-code-elifecycle
Malheureusement non: (Je viens de revenir au même problème lorsque je termine les étapes, réinstalle npm puis npm start.
Voyez-vous toujours ce message? "Cependant, une version différente de webpack a été détectée plus haut dans l'arborescence: / Users / aliceparker / node_modules / webpack"
Oui, il est toujours là. Dois-je supprimer webpack du dossier utilisateur global?
Oui, vous devez supprimer node_modules et package-lock.json de /Users/aliceparker . stackoverflow.com/questions/53497035/...
Oui!! Merci! Wow, j'ai tourné en rond tout le week-end à ce sujet! Ce que j'ai fait: supprimé les modules de nœud et le verrouillage du package de global (peut-être que je n'avais pas supprimé les deux auparavant), puis la vérification du cache npm.
Juste pour préciser, j'avais fait toutes les étapes pour résoudre le problème et peu importe ce que cela ne fonctionnait pas. J'ai découvert que j'avais un dossier node_modules dans le dossier de mon utilisateur. J'ai supprimé celui-ci, mais pas celui de mon projet et j'ai pu utiliser "npm start" sans aucun problème.
Le problème est avec votre dossier d'arborescence sur votre ordinateur lorsque vous faites tous les projets, essayez l'application dans le dossier qui n'existe pas et j'espère que cela fonctionnera
Supprimez package-lock.json (pas package.json !) Et / ou yarn.lock dans votre dossier de projet.
Supprimez node_modules dans votre dossier de projet.
Supprimez webpack des dépendances et / ou devDependencies dans le fichier package.json dossier de votre projet.
Exécutez npm install ou yarn , selon le gestionnaire de packages que vous utilisez.
J'ai essayé tout ce qui précède et cela ne fonctionnait pas, mais une fois, j'ai ajouté un fichier .env à la structure de mon projet et ajouté SKIP_PREFLIGHT_CHECK=true dans le fichier. je pourrais contourner le problème:
Voici ce que vous mettez dans le fichier .env :
dans mon cas, je résous mon problème de cette manière
.env à la racine du dossier du react folder .envSKIP_PREFLIGHT_CHECK=true dans le fichier .env latéralnpm start .La solution qui a fonctionné pour moi
Ajoutez SKIP_PREFLIGHT_CHECK=true à un fichier .env dans votre projet. Je ne sais pas si cela peut entraîner des erreurs à l'avenir.
Faites ce qu'il dit sur l'erreur pour que cela fonctionne.
Créez un fichier .env dans le répertoire de votre projet et ajoutez SKIP_PREFLIGHT_CHECK=true , cela fonctionnera.
Ce n'est pas une solution, dans la plupart des cas, cela masquera simplement l'erreur mais d'autres problèmes surviendront plus tard.
J'ai déjà rencontré le même problème et je l'ai résolu. L'application create-react-app webpack(v4.29.6) create-react-app déjà fourni le webpack(v4.29.6) , qui entre en conflit avec le webpack(v4.33.0) dans /Users/aliceparker/node_modules .
Donc, si vous supprimez le deuxième webpack(v4.33.0) , il s'exécuterait.
J'ai créé un projet en utilisant npx et j'obtenais la même erreur avec babel-eslint au départ. J'ai suivi l'approche @ davidflyod91, cela a fonctionné pour moi. Je ne suis pas content de supprimer tout le dossier node_module du répertoire ~ (dans mon MAC) (je veux dire l'endroit où les modules -g sont installés). Donc, j'ai remis les node_modules et les dossiers supprimés associés à ceux ci-dessous de node_modules dans le répertoire ~ / node_modules et j'ai essayé d'exécuter l'application (npm run start).
Et puis l'application a commencé à fonctionner.
vous devez d'abord essayer, créer un fichier avec le nom .env et stocker le SKIP_PREFLIGHT_CHECK = true
root / .env et .env doivent contenir SKIP_PREFLIGHT_CHECK = true