8
votes

Pourquoi est-ce que j'obtiens "ReferenceError: 'TextEncoder' is undefined" dans IE11 après avoir importé le polyfill de codage de texte?

J'essaie de pollyfill une bibliothèque fetch-readablestream ( https://github.com/jonnyreeves/fetch -readablestream ). J'ai ajouté les polyfills et la plupart des choses fonctionnent mais j'obtiens toujours une erreur concernant TextEncoder ERROR ReferenceError: 'TextEncoder' est indéfini

J'ai ajouté les pollyfills requis: web-streams-polyfill, text-encoding et babel-polyfill. J'ai essayé d'autres équivalents de ces polyfills mais j'obtiens le même problème.

Mon fichier polyfills.ts après les importations IE requises que j'ai décommentées.

ERROR ReferenceError: 'TextEncoder' is undefined
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "'TextEncoder' is undefined",
      message: "'TextEncoder' is undefined",
      name: "ReferenceError",
      number: -2146823279,
      stack: "ReferenceError: 'TextEncoder' is undefined
   at responseParserFactory (http://localhost:4200/vendor.js:139703:3)
   at xhrTransport (http://localhost:4200/vendor.js:139960:1)
   at fetchStream (http://localhost:4200/vendor.js:139795:4)
   at DevicewiseService.prototype.getNotifications (http://localhost:4200/main.js:6577:9)
   at Anonymous function (http://localhost:4200/main.js:159:17)
   at SafeSubscriber.prototype.__tryOrUnsub (http://localhost:4200/vendor.js:145834:9)
   at SafeSubscriber.prototype.next (http://localhost:4200/vendor.js:145772:13)
   at Subscriber.prototype._next (http://localhost:4200/vendor.js:145715:5)
   at Subscriber.prototype.next (http://localhost:4200/vendor.js:145692:9)
   at MapSubscriber.prototype._next (http://localhost:4200/vendor.js:150984:5)",
      Symbol([[Cancel]])_g.r6fxkqwxet3: undefined,
      Symbol([[Pull]])_h.r6fxkqwxet3: undefined,
      Symbol(INITIAL_VALUE)_p.r6fxkqwxet3: undefined,
      Symbol(rxSubscriber)_o.r6fxkqwxet3: undefined
   }

J'ai également essayé d'ajouter des scripts à index.html

<script src="node_modules/text-encoding/lib/encoding-indexes.js"></script>
<script src="node_modules/text-encoding/lib/encoding.js"></script>

Je ne m'attends à aucune erreur mais j'obtiens ceci:

import 'web-streams-polyfill'; // Run `npm install --save web-streams-polyfill`.
import 'text-encoding'; // Run `npm install --save text-encoding`.
import 'babel-polyfill'; // Run `npm install --save babel-polyfill`.

Nous pouvons voir que cela se produit dans l'appel fetchStream.

angular polyfills

1 commentaires

Avez-vous résolu le problème? Je suis coincé dans la même erreur.

3 Réponses :

5
votes

Utilisez le package npm: https://www.npmjs.com/package/text-encoding (maintenant obsolète, mais fonctionne comme un charme).

Ensuite, ajoutez au code polyfills.ts :

if (typeof window['TextEncoder'] !== 'function') {
  const TextEncodingPolyfill = require('text-encoding');
  window['TextEncoder'] = TextEncodingPolyfill.TextEncoder;
  window['TextDecoder'] = TextEncodingPolyfill.TextDecoder;
}

Ne pas utiliser import 'text-encoding'; !

0 commentaires

0
votes

J'ai pu polyfill l'encodage de texte en incluant ce script dans mon en-tête index.html .

Je n'ai pas encore tenté ce que @iCrow a suggéré. C'est probablement une meilleure solution.

0 commentaires

0
votes

Merci à la réponse d'iCrow, vraiment utile. Mon projet est basé sur Vue, et j'ai trouvé que le site Web ne pouvait pas bien fonctionner sur IE Edge 44. caniuse a >;

J'ai suivi la réponse d'iCrow, j'ai mis le code dans un fichier.

// main.js
import 'text-encoding-polyfill.js';

// ...

Et je l'ai importé en haut du fichier d'entrée de l'application.

// text-encoding-polyfill.js
;(function (window) {
  if (typeof window.TextEncoder !== 'function') {
    const TextEncodingPolyfill = require('text-encoding');
    window.TextEncoder = TextEncodingPolyfill.TextEncoder;
    window.TextDecoder = TextEncodingPolyfill.TextDecoder;
  }
}(window));

Une fois que Webpack a emballé le code, IE Edge peut enfin reconnaître TextEncoder!

0 commentaires