React Native导入自定义JS库报错：RefrenceError: Property 'document' doesn't exist. hermes

这个报错的核心原因是你使用的JS库依赖了浏览器环境特有的document对象，但React Native（尤其是启用Hermes引擎时）运行在原生JS环境中，没有浏览器的DOM API支持。以下是几种可行的解决办法：

1. 全局模拟所需的DOM API #

如果库仅用到document的少量方法，可以在导入库之前手动模拟这些方法，让库能正常运行。

示例代码：

// 在导入目标库的文件最顶部添加
global.document = {
  // 根据库的实际调用情况，模拟对应的方法
  getElementById: () => ({
    innerHTML: '',
    appendChild: () => {}
  }),
  createElement: () => ({
    setAttribute: () => {},
    addEventListener: () => {}
  })
};

// 之后再导入你的库
import yourCustomLibrary from 'your-custom-library';

注意：只模拟库实际用到的方法即可，不需要全量实现document的所有属性，避免冗余和潜在冲突。

2. 修改库源码适配非浏览器环境 #

如果你有权限修改库的源码，可以给依赖DOM的逻辑添加环境判断，兼容React Native环境：

示例修改（库内部代码）：

// 原库中依赖document的代码
if (typeof document !== 'undefined') {
  // 浏览器环境下的原有逻辑
  const element = document.getElementById('some-id');
  // ...其他操作
} else {
  // React Native等非浏览器环境的兼容逻辑
  // 可以是空实现，或者替换为RN对应的能力
}

如果库依赖的是DOM的动态样式/脚本注入能力，可以替换为React Native的StyleSheet或原生模块调用。

3. 使用WebView包裹库运行 #

如果库严重依赖完整的DOM环境，无法通过模拟或修改源码适配，可以将库放在WebView中运行，通过RN与WebView的通信桥进行交互：

示例组件：

import { WebView } from 'react-native-webview';
import { View } from 'react-native';

const LibraryWrapper = () => {
  const handleLibraryResult = (event) => {
    // 接收WebView中库返回的数据
    const result = JSON.parse(event.nativeEvent.data);
    // 在RN中处理结果
    console.log('库返回结果:', result);
  };

  // 嵌入库的HTML内容
  const webViewHtml = `
    <html>
      <head>
        <!-- 引入你的库 -->
        <script src="./your-library.js"></script>
        <script>
          // 调用库的方法
          const libraryResult = yourCustomLibrary.executeMethod();
          // 将结果发送给RN
          window.ReactNativeWebView.postMessage(JSON.stringify(libraryResult));
        </script>
      </head>
      <body></body>
    </html>
  `;

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ html: webViewHtml }}
        onMessage={handleLibraryResult}
        // 隐藏WebView界面（如果不需要显示库的UI）
        style={{ opacity: 0, height: 0 }}
      />
    </View>
  );
};

export default LibraryWrapper;

额外建议 #

• 先检查库的官方文档或npm页面，看是否有React Native适配版本，或者是否有推荐的替代RN专用库。
• 如果修改库源码，建议fork原仓库维护自己的分支，避免原库更新覆盖你的修改。

内容的提问来源于stack exchange，提问作者Suraj Gupta