React Native中使用DanfoJS报错：Property 'document'不存在

错误原因 #

DanfoJS核心包（danfojs）是为浏览器环境设计的，内部依赖浏览器特有的document对象，但React Native（尤其是使用Hermes引擎时）不存在该对象，直接导入会触发ReferenceError，进而导致App组件注册失败。

解决方案 #

改用DanfoJS的Node.js版本：danfojs-node，它专门针对Node.js/React Native等非浏览器环境优化，移除了对浏览器API的依赖。

操作步骤 #

• 卸载原danfojs包：

npm uninstall danfojs
# 或使用yarn
yarn remove danfojs

• 安装适配包：

npm install danfojs-node
# 或使用yarn
yarn add danfojs-node

• 替换代码中所有danfojs的导入路径为danfojs-node

代码修正 #

1. App.js修正 #

仅需修改导入语句：

import React from "react";
import * as Font from 'expo-font'
import ManagerScreen from "./components/ManagerScreem";
// 替换为适配Node.js/React Native的版本
import { readCSV } from "danfojs-node";

let customFonts = {
    "Roboto-Black" : require('./assets/fonts/Roboto-Black.ttf'),
    "Roboto-Bold" : require('./assets/fonts/Roboto-Bold.ttf'),
    "Roboto-Medium" : require("./assets/fonts/Roboto-Medium.ttf")
}

export default class App extends React.Component {
    
    state = {
        fontsLoaded: false,
    }

    async _loadFontsAsync() {
        await Font.loadAsync(customFonts);
        this.setState({ fontsLoaded: true });
      }
    
    componentDidMount() {
        this._loadFontsAsync();
      }

    render() {
        return (
            <ManagerScreen />
        )
    }
}

2. excelFile.js修正 #

除替换导入外，需修复语法、拼写及异步逻辑错误：

import { readExcel } from 'danfojs-node';

// 改为async函数，确保外部能获取异步处理结果
export default async function excelFile(fileUri){
    try {
        // 修复参数缺失逗号问题，添加配置对象包裹usecols
        const df = await readExcel(`${fileUri}`, { usecols: [1,6,11,13,14] });
        // 修正拼写错误：colums -> columns
        df.columns = ["dateOp","status","telephone","envoi", "retour"];
        // 使用DanfoJS官方eq方法过滤数据，避免直接==的语法错误
        const filteredDf = df.loc[df["status"].eq("Succès")];
        // 修正聚合键名，与列名保持一致（原代码mntEnvoi/mntRetour不存在）
        const groupeData = filteredDf.groupby(['dateOp','telephone']).aggregate({
            "envoi": "sum",
            "retour": "sum"
        }).to_dict({ orient: "records" });
        
        // 整理目标数据格式
        const data = groupeData.map(item => [
            item.dateOp,
            item.telephone,
            item.envoi,
            item.retour
        ]);
        return data;
    } catch (err) {
        // 抛出错误让外部调用者处理
        throw err;
    }
};

额外注意事项 #

• React Native中读取文件时，需确保fileUri为有效本地路径（可通过expo-document-picker等库获取）
• danfojs-node仅支持数据处理功能，依赖浏览器的图表等功能仍无法在React Native中使用

内容的提问来源于stack exchange，提问作者kaba mamoudou