web-dev-qa-db-fra.com

Create-React-App ne fonctionne pas dans le navigateur Edge

Je joue actuellement avec React, en commençant par Create-React-App Boilerplate, que j'ai téléchargé après https://reactjs.org/docs/create-a-new-react-app.html .

Dans Chrome le code fonctionne plutôt bien, cependant, dans Microsoft Edge, les fenêtres brwoser restent blanches sans aucune sortie.

Je n'ai pas modifié le package Create-React de quelque manière que ce soit, cependant, cela est également vrai pour les applications que j'ai écrites selon des tutoriels: Fonctionne très bien dans Chrome, mais Edge affiche simplement un écran blanc comme si aucun code n'avait été exécuté.

Ai-je besoin d'un package supplémentaire pour que React Apps s'exécute dans le navigateur Edge?)

javascriptreactjsmicrosoft-edge
2
WiWi

J'ai un problème similaire avec Edge 48. La suggestion d'utilisation de react-app-polyfill a résolu certains des problèmes - dans mon cas, c'était Array.prototype.flatMap soutien.

Cependant, les polyfills ne résolvent pas certains problèmes de langue. J'avais utilisé la syntaxe de propagation dans tout le code et je devais la remplacer manuellement.

Si vous avez quelque chose dans votre code comme ceci:

const { x, y, ...rest} = props;
const newProps = {...rest, a:1 };

alors vous devez remplacer la syntaxe de propagation par quelque chose comme:

const { x, y } = props;
const rest = {};
Object.keys(props).forEach(key => {
  if(key!=='x' && key !=='y') rest[key] = props[key];
});
const newProps = Object.assign({}, rest, {a:1});

Il existe peut-être un moyen de transpiler vers ES5, mais je ne suis pas sûr de savoir comment le faire sans déranger sérieusement le create-react-app configurations par défaut.

0
Trevedhek

J'avais affaire à IE et compatibilité Edge. Dans mon cas, je code dans certaines pages

windows.scrollTo(0,0);

Dans Chrome, FireFox et Safari fonctionnent bien, mais ont un conflit dans Edge et IE.
Plus précisément, la syntaxe scrollTo (0,0). J'ai donc essayé de changer la syntaxe en

windows.scrollTop = 0;

Ce simple changement résout mon problème et je trouve la solution de débogage sur IE console inspecteur, car la console Edge ne me montre aucune information. Bonne chance!

0
maxrojas

Si vous regardez dans les outils de développement, vous verrez toutes les erreurs qui se produisent. Si vous les fournissez, il sera plus facile de localiser le problème.

Pour les navigateurs plus anciens, c'est souvent un polyfill que vous devez ajouter:

npm install react-app-polyfill

https://www.npmjs.com/package/react-app-polyfill

0
ca8msm