23
votes

Page vierge après l'exécution de la compilation sur create-react-app

Essayer de déployer create-react-app sur netlify, mais ma version est une page vierge. J'utilise le fichier .env pour charger la clé API Firebase. Est-ce un problème pour la construction?

Même lorsque j'ai essayé de l'ouvrir localement sur mon ordinateur, sa page vierge et il génère une erreur dans la console: "Le chargement a échoué pour le avec la source" fichier: ///event-app/static/js/main.108757a0.js " "

package.json: https://gist.github.com/Verthon/f82371ad2bb636b2e95c5b7697aa0bb5

âžœ  event-app git:(master) âœ— npm run build

> event-app@0.1.0 build /home/jurr/Projects/event-app
> node scripts/build.js

Creating an optimized production build...
Compiled with warnings.

./src/components/Router.js
  Line 12:  'withFirebase' is defined but never used  no-unused-vars

./src/components/Firebase.js
  Line 21:  'Firebase' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  282.86 KB  build/static/js/main.108757a0.js
  3.1 KB     build/static/css/main.8e671453.css

reactjs create-react-app netlify

0 commentaires

8 Réponses :

39
votes

J'ai résolu le problème en définissant la homepage: "." selon ce doc https://facebook.github.io/create-react-app/docs/deployment

3 commentaires

J'obtiens une page vierge même après avoir ajouté "." comme page d'accueil. Tout indice sur quoi d'autre pourrait être faux

Oui, voyez ma réponse ci-dessous.

Dans mon cas, la résolution était d'ajouter le onload aux scripts de chargement de google api, comme dans les documents du client google api mentionnés ici

21
votes

Ajoutez "homepage": ".", Dans votre package.json puis compilez à nouveau.

0 commentaires

-2
votes

Le problème vient donc de la mise en cache de votre application dans le navigateur.

J'ai résolu ce problème avec serviceWorker () dans Create-react-app.

voici la solution: ->

ajoutez simplement ceci dans votre fichier index.js et supprimez le registre du service worker

import {unregister} de './registerServiceWorker';

unregister ();

0 commentaires

-4
votes

Exécuter npm run eject
Modifier le fichier webpack.config dans le dossier de configuration
Trouvez le chemin avec «static /» ou «static / js /» ou «static / css /» dans le fichier et supprimez ce chemin
Reconstruisez votre projet

Ce travail pour moi. j'espère que cela fonctionne pour vous aussi.

0 commentaires

2
votes

tout comme Verthon l'a dit en mettant la "homepage": ".", dans votre fichier package.json, au niveau supérieur comme ceci:

{
     "name": "myApp",
     "homepage": ".",
     // all other package.json stuff...
}

0 commentaires

10
votes

Si vous utilisez react-router et essayez d'ouvrir index.html directement dans le navigateur (ou en utilisant electron, qui fait essentiellement cela), en plus de définir la homepage d' homepage comme d'autres l'ont suggéré, remplacez votre BrowserRouter par un HashRouter .

J'essayais de créer une application d'électrons en utilisant create-react-app. Lors de l'exécution en développement, tout allait bien, mais lorsque j'ai créé l'ARC et que j'ai ensuite dirigé l'application électron vers le fichier index.html , j'ai obtenu la page vierge.

J'ai trouvé que c'était exactement la même chose que d'ouvrir le fichier index.html directement dans le navigateur. Tout le monde dit "définir la homepage dans package.json ", mais je l'avais déjà. Et maintenant!?

J'ai finalement compris que le problème était le react-router . J'utilisais un BrowserRouter . Le passage à un HashRouter résolu le problème pour moi.

7 commentaires

Merde, cela m'a sauvé la vie

Mec, m'a sauvé la vie aussi. avez-vous une idée de pourquoi HashRouter fonctionne?

HashRouter fonctionne car rien après le "#" dans l'URL n'est envoyé au "serveur". Cette partie de l'URL n'est interprétée que par react-router.

C'est une solution très efficace, merci.

Merci pour votre réponse. c'est un travail, mais après avoir essayé de cliquer sur une autre page, je ne peux pas rediriger.

Ça a marché comme sur des roulettes. Merci!

Cela a également résolu le problème pour moi, merci beaucoup! Mais savons-nous pourquoi? Est-ce un bug connu?

0
votes

J'essayais d'ouvrir l'application après la construction en double-cliquant sur l'index.html et je n'ai pas fonctionné non plus, j'ai obtenu la page vierge mais si les fichiers construits sont exécutés dans un environnement de serveur fonctionne. https://create-react-app.dev/docs/deployment/

0 commentaires

0
votes

Oooor comme je viens de découvrir que j'avais fait encore et encore: vous avez publié le dossier public au lieu du dossier de construction .

0 commentaires