web-dev-qa-db-fra.com

React JS ne fonctionne pas avec Internet Explorer 9

J'essaie d'utiliser React avec Internet Explorer 9 mais j'obtiens les erreurs suivantes même en essayant d'exécuter quelque chose de très simple:

SCRIPT438: l'objet ne prend pas en charge la propriété ou la méthode 'isArray' react-with-addons.js, caractère de ligne 4 317

SCRIPT438: l'objet ne prend pas en charge la propriété ou la méthode 'create' JSXTransformer.js, caractère de ligne 4 326

J'ai lu https://facebook.github.io/react/docs/working-with-the-browser.html , qui dit qu'IE8 pourrait avoir ces problèmes, mais aucune mention sur IE9. Google n'a pas non plus vraiment proposé de solutions.

Pourtant, j'ai essayé d'ajouter es5-shim/sham comme suggéré sur cette page. Cela se traduit par une erreur différente:

SCRIPT438: l'objet ne prend pas en charge la propriété ou la méthode 'hasAttribute' es5-shim.min.js, caractère de ligne 6 4143

Quelqu'un at-il déjà rencontré ces erreurs dans IE9 ou autre?

Merci pour l'aide!

Le code complet que j'essaie d'exécuter est:

<html>
        <head>
                <script src="js/es5-shim.min.js"></script>
                <script src="js/es5-sham.min.js"></script>
                <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
                <script src="js/react-with-addons.js"></script>
                <script src="js/JSXTransformer.js"></script>

        </head>
        <body>
                <div id="container"></div>
                <script type="text/jsx">
                        React.render(
                                <h1>HELLO WORLD!</h1>
                        );
                </script>
        </body>
</html>
javascriptinternet-explorer-9reactjs
18
user1620122

En règle générale, vous devez inclure les polyfills spécifiés pour les fonctionnalités ES5 (comme vous l'avez remarqué): https://facebook.github.io/react/docs/react-dom.html#browser-support

Vous pouvez également avoir besoin de HTML5 Shiv en plus des polyfills que vous avez fournis.

Plus précisément, cependant, le problème n'est probablement pas avec les polyfills mais avec le mode de document dans lequel IE9 est exécuté. Vous voulez vous assurer que vous définissez le mode de document correct dans votre fichier HTML afin que IE sait quelle version cibler. Sinon, même si vous utilisez IE9, il peut cibler IE7, ce qui n'est pas bon.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
39
monastic-panic

Dans le fichier index.js, vous devez ajouter polyfill. Ces importations doivent être dans la première de votre importation.

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';   
//other imports

Maintenant ouvert dans ur c'est à dire que cela fonctionne.

Avant l'importation, vous devez installer react-app-polyfill.

 //To install use below command:

 npm install react-app-polyfill

référence du lien: https://www.npmjs.com/package/react-app-polyfill

3
Manjula Devi