Je suis nouveau dans create-react-app. Je viens de faire une configuration rapide avec redux
et react-router-dom
qui se construisent bien sur mon ordinateur en utilisant yarn build
, mais en poussant vers Scalingo ou Heroku, la construction échoue avec l'erreur suivante:
{ "name": "xxxx", "version": "0.1.0", "private": true, "dependencies": { "@sentry/browser": "^4.5.4", "prop-types": "^15.7.1", "react": "^16.8.1", "react-dom": "^16.8.1", "react-redux": "^6.0.0", "react-redux-i18n": "^1.9.3", "react-router-dom": "^4.3.1", "react-scripts": "2.1.5", "redux": "^4.0.1", "redux-logger": "^3.0.6", "redux-promise": "^0.6.0", "redux-thunk": "^2.3.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "eslint-config-airbnb": "^17.1.0", "eslint-plugin-import": "^2.16.0", "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-react": "^7.12.4" } }
Je n'ai rien fait pour personnaliser le déploiement, juste poussé en production.
Voici le journal de déploiement complet:
Enumerating objects: 74, done. Counting objects: 100% (74/74), done. Delta compression using up to 4 threads Compressing objects: 100% (68/68), done. Writing objects: 100% (74/74), 185.95 KiB | 4.77 MiB/s, done. Total 74 (delta 20), reused 15 (delta 0) <-- Start deployment of xxx-app-staging --> Fetching source code -----> Creating runtime environment NPM_CONFIG_LOGLEVEL=error NPM_CONFIG_PRODUCTION=true NODE_VERBOSE=false NODE_ENV=production NODE_MODULES_CACHE=true -----> Installing binaries engines.node (package.json): unspecified engines.npm (package.json): unspecified (use default) engines.yarn (package.json): unspecified (use default) Resolving node version 8.x... Downloading and installing node 8.15.0... Using default npm version: 6.4.1 Resolving yarn version 1.x... Downloading and installing yarn (1.14.0)... Installed yarn 1.14.0 -----> Restoring cache Skipping cache restore (not-found) -----> Building dependencies Installing node modules (yarn.lock) yarn install v1.14.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.4: The platform "linux" is incompatible with this module. info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.7: The platform "linux" is incompatible with this module. info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > eslint-plugin-react@7.12.4" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0". warning "react-scripts > pnp-webpack-plugin > ts-pnp@1.0.0" has unmet peer dependency "typescript@*". warning " > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0". warning "eslint-config-airbnb > eslint-config-airbnb-base@13.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0". warning " > eslint-plugin-import@2.16.0" has unmet peer dependency "eslint@2.x - 5.x". warning " > eslint-plugin-jsx-a11y@6.2.1" has unmet peer dependency "eslint@^3 || ^4 || ^5". [4/4] Building fresh packages... Done in 12.22s. Running build (yarn) yarn run v1.14.0 $ react-scripts build Creating an optimized production build... Failed to compile. ./src/index.jsx Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import' Referenced from: at Array.forEach (<anonymous>) at Array.reduceRight (<anonymous>) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. -----> Build failed We're sorry this build is failing! Some possible problems: - A module may be missing from 'dependencies' in package.json http://doc.scalingo.com/languages/javascript/nodejs#ensure-youre-tracking-all-your-dependencies - This module may be specified in 'devDependencies' instead of 'dependencies' http://doc.scalingo.com/languages/javascript/nodejs#install-devdependencies Keep coding, Scalingo ! An error occured during buildpack compilation ! Error deploying the application ! â Invalid return code from buildpack
Et voici mon package.json
:
./src/index.jsx Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import' Referenced from: at Array.forEach (<anonymous>) at Array.reduceRight (<anonymous>)
Je ne comprends pas pourquoi j'utiliserais eslint
et ses plugins dans mon code de production, et comment y remédier. Pouvez-vous m'aider?
4 Réponses :
J'ai supprimé toutes mes configurations devDependencies et eslint
précédemment ajoutées et cela a résolu mon problème.
La philosophie de l'ARC concerne formatage automatique du code en utilisant Prettier , donc je suppose que c'est ce que je fais 🤷♂️
<₹UPDATE
Le problème était d'ajouter des devDependencies
qui ne sont pas installés en production. Remplacer la configuration d'eslint est correct, mais tous les packages nécessaires doivent être ajoutés aux dépendances
principales.
Cela ne peut pas être la réponse car j'ai déjà ajouté avec succès des configurations eslint aux applications de craie sans problème. De plus, cela a bien fonctionné pour moi en développement, ce n'est que lorsque j'ai essayé de pousser vers heroku que j'ai vu l'erreur. J'ai résolu cela en déplaçant toutes les devDependencies dans des dépendances régulières, mais il doit y avoir un autre moyen.
Oui, cela fonctionnait aussi pour moi en dev. Mais vous avez raison sur devDependencies
qui était le vrai problème en production. J'ai mis à jour la réponse, merci pour votre commentaire @adam troop. Faites-moi savoir si vous trouvez une autre solution.
J'aimerais savoir pourquoi l'ARC ne veut pas que vous ajoutiez des dépendances de développement @adesurirey si vous vous souvenez où vous avez lu cela? Cela n'a pas résolu le problème pour moi.
Déplacez toutes vos Devdependencies
vers dépendances
et supprimez les Devdependencies
J'ai résolu le problème pour moi
La suppression de cette ligne de package.json a fonctionné pour moi:
"eslintConfig": { "extends": "react-app" }
J'ai une plus jolie configuration sur mon code de studio visuel. Je pense que le problème vient du fait que la configuration eslint est en conflit avec la plus jolie. Il y a aussi une autre option que je n'ai pas essayée qui consiste à installer eslint-config-prettier
. Voici la documentation à ce sujet: Intégration plus jolie avec les linters p >
Pour une raison quelconque, supprimer ceci de mon package CRA a fonctionné pour moi dans VS Code:
"babel": { "presets": [ "react-app" ] }
github.com/facebook/create-react-app/issues/6391 il est posté il y a 3 jours et là on a dit que ça devrait fonctionner. c'est peut-être lié à ton cas
y a-t-il une solution à cela?
@ChanceSmith Regardez la réponse ci-dessous
@skyboyer: Merci pour le lien, j'ai trouvé la solution à mon problème dans les commentaires: c'était aussi simple que de supprimer
node_modules
et d'exécuternpm i
Vous pouvez peut-être partager la section d'importation de
/src/index.jsx
, l'erreur suggère qu'il y a une importation ici qui ne peut pas être trouvée. Peut-être que l'importation ne devrait pas être là en premier lieu, mais il me semble que ce que vous avez fait est correct.