2
votes

Erreur: échec du chargement de l'importation du plug-in: impossible de trouver le module 'eslint-plugin-import' lors du déploiement d'une application create-react-app

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?


5 commentaires

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écuter npm 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.


4 Réponses :


8
votes

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.


3 commentaires

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.



1
votes

Déplacez toutes vos Devdependencies vers dépendances et supprimez les Devdependencies

J'ai résolu le problème pour moi


0 commentaires

0
votes

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 >


0 commentaires

0
votes

Pour une raison quelconque, supprimer ceci de mon package CRA a fonctionné pour moi dans VS Code:

"babel": {
    "presets": [
      "react-app"
    ]
  }


0 commentaires