Why am I getting “ReferenceError: 'TextEncoder' is undefined” in IE11 after importing the text-encoding polyfill?

问题

I am trying to pollyfill a library fetch-readablestream (https://github.com/jonnyreeves/fetch-readablestream). I have added the polyfills and most things do work but I keep getting an error about TextEncoder ERROR ReferenceError: 'TextEncoder' is undefined

I've added the required pollyfills: web-streams-polyfill, text-encoding, and babel-polyfill. I tried other equivalents of these polyfills but I get the same issue.

My polyfills.ts file after the required IE imports that I uncommented.

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`.

I also tried adding scripts to index.html

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

I don't expect any errors but I get this:

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
   }

We can see this happens in the fetchStream call.

回答1:

Use npm package: https://www.npmjs.com/package/text-encoding (now deprecated, but works like a charm).

Then add to polyfills.ts code:

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

Do not use import 'text-encoding'; !

回答2:

I was able to polyfill text-encoding by including this script in my index.html header.

<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.6.4/lib/encoding.min.js"></script>

I have not yet attempted what @iCrow suggested. This is probably a better solution.

回答3:

Thanks to iCrow's answer, really helpful. My project is based on Vue, and I found the website can not run well on IE Edge 44. caniuse;

I followed iCrow's answer, put the code into a file.

// 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));

And import it at the top of app entry file.

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

// ...

After webpack packed up the code, finally IE Edge can recognize TextEncoder!

来源：https://stackoverflow.com/questions/54676056/why-am-i-getting-referenceerror-textencoder-is-undefined-in-ie11-after-impo

标签

angular

polyfills