web-dev-qa-db-fra.com

Pourquoi IE 11 afficher le rendu de la page vierge

J'ai un problème avec IE 11 et mon application de réaction. J'utilise Webpack, babel et polyfill.io cdn. idée de ce qui peut mal se passer?

Merci d'avance.

javascriptreactjsinternet-explorerrenderingpolyfills
9
itgirl1234

React peut ne pas être compatible tout de suite avec IE,

De la documentation officielle:

React prend en charge tous les navigateurs courants, y compris Internet Explorer 9 et les versions ultérieures, bien que certains polyfill soient obligatoires pour les navigateurs plus anciens tels que IE 9 et IE 10.

Nous ne prenons pas en charge les anciens navigateurs qui ne prennent pas en charge les méthodes ES5, mais vous constaterez peut-être que vos applications fonctionnent dans les anciens navigateurs si des polyfillages tels que es5-shim et es5-sham sont inclus dans la page. Vous êtes seul si vous choisissez de prendre ce chemin.

Pour que votre application fonctionne sur IE (11 ou 9), vous devez installer React-app-polyfill:

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

Traits :

Chaque polyfill assure la présence des fonctionnalités linguistiques suivantes:

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

Usage

Tout d’abord, installez le paquet en utilisant Yarn ou npm:

npm install react-app-polyfill

Vous pouvez maintenant importer le point d’entrée de la version minimale que vous souhaitez prendre en charge. Par exemple, si vous importez le point d'entrée IE9, cela inclut le support IE10 et IE11.

Internet Explorer 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

Vous pouvez également configurer votre manifeste pour gérer différents navigateurs, à l'aide de la documentation suivante: https://github.com/browserslist/browserslist

exemple :

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]
14
Treycos

Pour quiconque tombe sur ce problème,

Si react-app-polyfill ne fonctionne pas pour vous, essayez plutôt core-js.

$ npm install core-js

Assurez-vous qu'il s'agit de la première ligne de votre fichier src/index.js:

import 'core-js/stable'

En outre, vous ne verrez peut-être pas le correctif lorsque vous êtes en développement.

Pour moi, le problème n'a été résolu que dans la version de production (react build)

3
Kurisubo

react-app-polyfills fonctionne pour moi uniquement en production, pas en dev. Construisez, déployez puis testez.

1
Konstantin Zlatkov

Si vous utilisez Object.assign () dans votre réducteur (par exemple) ou dans une autre fonction non prise en charge par IE11 sans remplissage multiple, vous auriez ce problème.

1
Vjeko Babic

J'ai essayé les solutions proposées ci-dessus, mais je ne pouvais toujours pas faire fonctionner la page sur IE11 ni dans mon ancien iOS 9.3.2 ...

J'ai fait exactement comme suggéré par @Treycos et @Kurisubo mais pas de résolution; pour résoudre, devait remplacer es6 flèche fonction de mon composant fonctionnel dans le style déclaratif de l'ancienne école et la page chargée sur IE 11 et iOS 9.3.2

NOTE : ce composant fonctionnel est le premier composant rendu sur la page.

Ajouter ceci ici pour que quelqu'un puisse en bénéficier à l'avenir.

0
Akber Iqbal