Expo React Native 找不到变量：TextDecoder

Question

因此，由于某种原因，当我尝试在手机中的 Expo Go 应用程序上运行该应用程序时，我遇到了此错误。如果我在网络浏览器上运行显然没问题。

这是错误日志

ReferenceError：找不到变量：TextDecoder

堆栈跟踪：
node_modules\expo\build\environment\react-native-logs.fx.js:27:4 错误
node_modules\react-native\Libraries\Core\ExceptionsManager.js:95:4 in reportException
node_modules\react-native \Libraries\Core\ExceptionsManager.js:141:19 在handleException
node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 在handleError
node_modules@react-native\polyfills\error-guard.js:49:36在 ErrorUtils.reportFatalError
node_modules\metro-runtime\src\polyfills\require.js:203:6 在guardedLoadModule
http://192.168.0.29:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify =false:190345:3 在全局代码中...

Answer 1

它在网络上适用但在手机上不起作用的原因是，它TextDecoder是一个 Web API，通常在所有现代浏览器JS 引擎中可用，但在 Hermes（React Native 的 JS 引擎）上不受支持。解决这个问题的方法是对 API 使用 polyfill 并将其公开到全局。

实现此目的的一种简单方法是使用这个polyfill 库。另一种方法是模仿该库的功能，这使您可以更灵活地选择要使用的 polyfill，因为有很多选项可供选择（例如，请参阅此处的竞争对手列表）。为此，您需要安装您选择的polyfill（例如npx expo install text-encoding），然后创建一个包含以下内容的文件：

import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions"

const applyGlobalPolyfills = () => {
  const { TextEncoder, TextDecoder } = require("text-encoding")

  polyfillGlobal("TextEncoder", () => TextEncoder)
  polyfillGlobal("TextDecoder", () => TextDecoder)
}

export default applyGlobalPolyfills

然后将此文件导入到您的App.js文件中（_layout.js如果使用 Expo 的 Router v2，则导入到您的根目录中）并调用导出的函数，如下所示：

import applyGlobalPolyfills from "path/to/applyGlobalPolyfills" // <-- Change the path
applyGlobalPolyfills()

// ...rest of App.js file

可能值得注意的是，您可以通过这种方式添加您需要支持的任何其他全局 API。您可以将其添加到同一文件中，也可以将其拆分为每个全局 API 的不同 util 函数，以进行树摇动等。