在Next.js getStaticProps中使用react-papaparse报错：XMLHttpRequest未定义

问题根源 #

• usePapaParse是React Hook，只能在组件渲染阶段调用，不符合Hook规则，不能在getStaticProps这类服务端运行的函数中使用。
• readRemoteFile方法依赖浏览器环境的XMLHttpRequest对象，而getStaticProps运行在Node.js环境中，不存在该对象，因此触发报错。

正确解决方案 #

放弃react-papaparse的封装，直接使用原生papaparse包，在Node.js环境中手动获取CSV内容后再解析：

1. 安装原生papaparse包：

npm install papaparse
# 或
yarn add papaparse

2. 修改getStaticProps代码：

// index.js Next.js page
import Papa from 'papaparse';

export async function getStaticProps(context) {
  // 1. 在Node.js环境中用fetch获取远程CSV文本内容
  const response = await fetch(googleSheetUrl);
  const csvText = await response.text();

  // 2. 用原生Papaparse解析CSV文本
  const results = Papa.parse(csvText, {
    // 可根据需求添加解析配置，比如开启表头解析：header: true
  });

  console.log("PAPAPARSE::complete", results);

  // 3. 将解析后的数据返回给页面组件
  return {
    props: {
      csvData: results.data
    },
    // 可选：设置静态页面自动重新生成的间隔（秒）
    revalidate: 60
  };
}

补充说明 #

react-papaparse是为浏览器端React组件设计的封装，提供了文件上传、浏览器端远程读取等适配前端的API，但不适合服务端环境。在Node.js中，我们需要自行处理HTTP请求获取CSV内容，再交给原生papaparse解析，完全避开浏览器专属API的依赖。

内容的提问来源于stack exchange，提问作者Primoz Rome