Mon application react est créée à l'aide de l'application create react https: // reactjs.org/docs/create-a-new-react-app.html ne démarre pas.
Quand j'exécute npm run start mon application se bloque avec le message suivant.
Démarrage du serveur de développement ...
rm -rf node_modules npm install npm start
Version du nœud: v12.14.1
Version Npm: 6.13.4
J'ai essayé cela plusieurs fois et chaque fois que cela échoue, cela crée un nouveau processus de nœud, je le sais car il me demande de sélectionner un autre port.
Jusqu'à présent, j'ai tenté le processus suivant sans aucune chance
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "^25.1.1",
"@types/node": "^13.7.0",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"@types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"lodash": "^4.17.15",
"node-sass": "^4.13.1",
"npm-check-updates": "^4.0.1",
"qs": "^6.9.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"typescript": "^3.7.5"
},
"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"
]
},
"devDependencies": {
"@semantic-release/gitlab": "^6.0.2",
"semantic-release": "^17.0.2"
},
"release": {
"branch": "master",
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
[
"@semantic-release/gitlab",
{
"gitlabUrl": "https://git.companyname.com"
}
]
]
}
}
4 Réponses :
Si vous avez installé vous-même certains packages après avoir créé une application react en utilisant creat-react-app, cela peut être dû au fait que l'un des packages installés ne fonctionne pas. Dans le passé, j'ai eu un problème comme votre cas. À ce moment-là, j'ai installé le package react-pdf pour afficher les fichiers PDF. En conséquence, le serveur de développement n'a pas démarré et chaque fois que je l'ai réexécuté, il m'a demandé de choisir un autre port. Après avoir supprimé ce package, cela a bien fonctionné.
Je pense donc que le module package.json ne fonctionne peut-être pas. À mon avis, il peut s'agir de packagae «qs».
J'ai désinstallé qs et exec npm run start mais cela n'a pas fonctionné
La dépendance qs est à jour et s'installe très bien (npm 6.13.7 et nœud v8 / v12) Il est peu probable que ce soit le problème à mon humble avis.
J'ai dit peut-être. Bien sûr, ce paquet ne peut pas être «qs». Mais je suis sûr que cette erreur provient du mauvais package que vous avez installé. Je pense que vous pouvez le trouver facilement.
J'ai copié votre fichier package.json et l'ai exécuté localement sur ma machine.
J'ai d'abord exécuté npm install
J'ai ensuite créé /src/index.js et ajouté le code par défaut suivant de create-react-app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Et j'ai également créé / public / index .html:
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<div>We're in!</div>, document.getElementById("root"));
Enfin, j'ai exécuté npm start
L'application fonctionnait bien, le seul souci étant une sortie de la sous-dépendance de date (ancienne version de corejs)
Cela m'amène à penser que le problème pourrait provenir de votre configuration locale.
Je recommanderais de vider votre cache npm et de réessayer .
Pour vider votre cache, exécutez npm cache clear --f avec des autorisations élevées.
Ma suggestion serait alors de démarrer un nouveau répertoire d'application, juste au cas où il y aurait quelque chose de corrompu dans le répertoire existant.
Pour moi, le redémarrage de mon ordinateur a résolu le problème.
Je ne connais toujours pas la cause de cela car l'environnement est resté le même et à part la suppression de node_modules et npm install, je n'ai rien fait d'autre.
Je l'ai corrigé en installant une version précédente de npm-scripts Essayez d'utiliser ceci:
npm install react-scripts@2.1.8
Avez-vous essayé de visiter localhost: 3000?
Oui, j'ai essayé de visiter localhost: port (3000) et la page se charge en permanence pour toujours
vérifiez la console de votre navigateur
Essayez:
npm install npm @ latest -g@demkovych Rien dans la console de pertinence, la page ne termine pas le chargement donc je ne sais pas à quoi vous vous attendez
Avez-vous changé la configuration du Webpack?
@demkovych Non, et pour autant que je sache, lors de la création d'une application à l'aide de create-react-app, il n'expose pas de fichier Webpack.
essayez de nettoyer votre cache npm
npm start - --reset-cacheounpm cache clear --forcecomme solution de contournement temporaire, vous pouvez essayer de réduire une version de react-scripts:
"react-scripts": "^ 2.1.8"@demkovych Aucune de ces commandes de réinitialisation du cache n'a fonctionné.
@ZainUlAbideen J'ai essayé de mettre à jour npm et cela n'a pas aidé.
@Kay, Dans la console du navigateur, quelle erreur voyez-vous lorsque vous essayez d'ouvrir localhost: 3000 Pourquoi
réagit ,react-dometreact-router-domimportés deux fois? Essayez de supprimer les importations mentionnées avec@type / ...et d'ajouter/node_modules/react-scripts/bin/react-scripts.js startà votre script de démarrage