ReactJS.NET ReferenceError: TextEncoder is not defined

Question

I created a ReactJS.NET project using the reactnet-webpack template, then upgraded it from React 16 to the latest v18. However when I try to run the out of the box example I get the following error:

   ReferenceError: TextEncoder is not defined
     at eval (<anonymous>:145:19) -> var textEncoder = new TextEncoder();
     at eval (<anonymous>:7002:5)
     at ./node_modules/react-dom/cjs/react-dom-server.browser.development.js (vendor.6d1c51ef.js:23:1)
     at __webpack_require__ (runtime.36e5d9f0.js:85:30)
     at eval (<anonymous>:6:7)
     at ./node_modules/react-dom/server.browser.js (vendor.6d1c51ef.js:59:1)
     at __webpack_require__ (runtime.36e5d9f0.js:85:30)
     at eval (<anonymous>:6:74)
     at eval (<anonymous>:47:30)
     at ./Content/components/expose-components.js (main.ab0e9b20.js:35:1)
     at __webpack_require__ (runtime.36e5d9f0.js:85:30)
     at checkDeferredModules (runtime.36e5d9f0.js:46:23)
     at webpackJsonpCallback (runtime.36e5d9f0.js:33:19)
     at vendor.6d1c51ef.js:1:53
     at JavaScriptEngineSwitcher.V8.V8JsEngine.InnerExecute(String code, String documentName)
     at JavaScriptEngineSwitcher.Core.JsEngineBase.Execute(String code, String documentName)
     at React.JavaScriptEngineFactory.LoadUserScripts(IJsEngine engine)

How would I go about resolving this?

Answer 1

There are two ways you can try it：

First, Run npm install util, and use this code:

var util= require('util');
const textEncoder = new util.TextEncoder();

Second, Try by running npm install text-encoding.

and paste this code wherever it gives you the error:

const TextEncodingPolyfill = require('text-encoding');
Object.assign(global, {
  TextEncoder: TextEncodingPolyfill.TextEncoder,
  TextDecoder: TextEncodingPolyfill.TextDecoder,
});
const textEncoder = new TextEncoder();

Hope this can help you.