4
votes

Impossible de trouver le fichier lors de la tentative de déploiement sur heroku (fonctionne localement)

J'essaye de déployer mon application sur Heroku, cela fonctionne en local mais pas de chance en ligne. J'ai supprimé et réinstallé les modules de nœuds.

J'ai eu une autre erreur assez liée à ceci (le fichier n'a pas trouvé les mêmes noms, etc.) J'ai changé les chemins relatifs en pensant que cela résoudrait le problème, mais je n'obtiens rien à en sortir

L'erreur est :

Impossible de trouver le fichier './Components/SearchBar/SearchBar'

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SearchBar from './Components/SearchBar/SearchBar'
import BusinessList from './Components/BusinessList/BusinessList'
import Business from './Components/Business/Business'
import Yelp from './Components/Util/Yelp'

Je m'attendais à ne pas tirer d'erreur pour quelque chose d'aussi simple, j'ai versé sur les noms de fichiers et de dossiers et cela n'a tout simplement pas de sens.

PS Je pense que c'est probablement non connecté J'ai const yelpApiKey = process.env.yelpApiKey pour que mon heroku se connecte à ma clé API (tapé à l'intérieur mon compte)

 FILESTRUCTURE


12 commentaires

Quelle est votre configuration de construction? Si la source de l'application pointe vers le dossier «src», vous devez empêcher l'importation depuis le dossier «src».


D'accord - je suis super ignorant des configurations de compilation dans React, où dois-je regarder? Pour un peu de contexte, j'ai utilisé create react app npm run build m'amène à la même erreur.


Pouvez-vous essayer de supprimer «src» des importations. Et quel est l'emplacement du fichier actuel dans lequel vous importez?


J'ai ajouté la structure du fichier en tant que capture d'écran


devrait-il ressembler à importer Business depuis './Components/Business/Business.js' ou importer SearchBar depuis './Components/SearchBar/SearchBar.js' parce que j'ai eu une erreur similaire quand c'était comme ça et c'est là que j'ai changé le chemin du fichier pour essayer de refléter que la racine était là.


La suppression de «src» et «.js» des importations devrait fonctionner. Avez-vous essayé ça? comme: importer SearchBar depuis './Components/SearchBar/SearchBar'


remote: ./src/App.js remote: Impossible de trouver le fichier './Components/SearchBar/SearchBar' dans './src'.


Je tourne avec cela parce que cela ne semble tout simplement pas dépasser cette erreur ... et j'ai essayé de déplacer l'héritage des fichiers


Pouvez-vous supprimer tout votre code professionnel / privé et le télécharger sur github / stackblitz / codesandbox?


stackblitz.com/github/Anthematics/BigEats -> c'est un projet personnel, allez à utils / yelp et collez une clé api pour l'exécuter (yelp api)


d'accord, sur mon github actuel, tous mes dossiers sont en minuscules mais localement ils ne le sont pas? cela ne poserait-il pas des problèmes ici? aussi l'envoyer à github ne le change pas.


Ohh .. Pouvez-vous vérifier dans le serveur de déploiement si les noms de dossier sont identiques à ceux de votre local?


4 Réponses :


0
votes

J'ai trouvé 2 problèmes avec votre code:

  1. Le chemin d’importation est sensible à la casse (pour certains environnements). Et vous utilisez " C omponents" au lieu de " c omponents"
  2. L'importation de "App" dans index.js est incorrecte. Utilisez suivant

    import App from './App';
    


4 commentaires

C'est juste une erreur de favicon maintenant, je l'ai vu un million de fois.


Bizarre. Je déteste dire cela, mais maintenant il plante au favicon et même si je peux littéralement voir le favicon dans le navigateur, il ne jouera pas


Oui, ce qui est drôle, c'est que j'avais une application de rails avec ce problème (qui a été corrigé) mais je n'arrive pas à comprendre comment traduire cela pour réagir.


J'ai supprimé le fichier procfile heroku parce que j'ai eu une erreur concernant Bin www mais bien sûr maintenantheroku télécharge une application vierge.



5
votes

Merci @Jason d'avoir posé cette question et @Rakesh d'avoir répondu.

J'ai déployé le projet create-react-app sur Heroku puis j'ai rencontré une erreur similaire qui a échoué dans la construction de mon projet. l'erreur était que routes.js n'a pas réussi à importer signup.js

Journal Heroku

my project structure

|root
|src
|  componets
|     user
|       signup
|routes
|index.js

solution

Heroku déploie des projets sur des serveurs Linux, cela signifie qu'il est sensible à la casse si vous faites une erreur, la construction échouera. Je conseille de rester avec des minuscules lors de la dénomination des fichiers et des répertoires.

-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=false
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  10.16.3
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 10.16.3...
       Downloading and installing node 10.16.3...
       Using default npm version: 6.9.0
       
-----> Restoring cache
       Caching has been disabled because NODE_MODULES_CACHE=false
       
-----> Installing dependencies
       Installing node modules (package.json + package-lock)
       
       > core-js@2.6.9 postinstall /tmp/build_5d506b6dfc93b7f4b6575e02cc682130/node_modules/babel-runtime/node_modules/core-js
       > node scripts/postinstall || echo "ignore"
       
       
       > core-js@3.2.1 postinstall /tmp/build_5d506b6dfc93b7f4b6575e02cc682130/node_modules/core-js
       > node scripts/postinstall || echo "ignore"
       
       added 1507 packages from 719 contributors and audited 905071 packages in 35.746s
       found 0 vulnerabilities
       
       
-----> Build
       Running build
       
       > chat-app@0.1.0 build /tmp/build_5d506b6dfc93b7f4b6575e02cc682130
       > react-scripts build
       
       Creating an optimized production build...
       Failed to compile.
       
       ./src/routes.js                                         // my beautiful error here
       Cannot find file './Components/User/signup/signup.js' in './src'.   
       
       
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chat-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the chat-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.ynm0W/_logs/2019-09-30T15_24_32_571Z-debug.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

Alternativement,

Après avoir corrigé des erreurs, j'ai toujours eu la même erreur. alors pourquoi? Je n'ai pas remarqué que Git ne pousse pas le changement. Lorsque vous renommez uniquement le répertoire et même si vous faites git add , git commit et git push , Git ne prend parfois pas en compte les changements. Je conseille après le changement d'aller sur le site Web pour vérifier.

Enfin,

lors du déploiement sur Heroku, veuillez déployer uniquement la branche de base. par exemple, Master ou develop . Je me suis rendu compte à chaque fois que j'ai déployé ma branche de fonctionnalité, Heroku détecte automatiquement ma branche de base qui était develop


2 commentaires

Homme tu es sauveur de vie! Je viens de passer 30 minutes à comprendre ce qui se passe


Cela m'a également évité des heures supplémentaires de déchirer (ce qui reste de) mes cheveux !! Merci! Je n'avais aucune idée que Git n'avait pas mis à jour les changements de casse dans les noms de fichiers!



0
votes

J'ai essayé toutes les suggestions ci-dessus, mais aucune ne fonctionne pour moi. Finalement, ce que j'ai fait a été de supprimer le fichier qui se plaignait d'être manquant par heroku et de le remplacer par un composant factice. Après cela, j'ai vérifié mes modifications apportées à heroku. Tout devrait être déployé avec succès maintenant.

Enfin, je peux remplacer mon ancien composant factice par mon composant d'origine et réintégrer heroku et allelujah, cela a fonctionné !!!!

J'espère que ma solution de contournement pourra faire gagner du temps à quelqu'un :)

Merci


0 commentaires

0
votes

Dans mon cas, j'ai renommé mon fichier localement, mais quand je l'ai poussé sur github, cela ne s'y reflète pas. j'ai donc supprimé ce fichier et créé un nouveau fichier avec le même contenu et cela a fonctionné!


0 commentaires