Next.js v14.2.5中使用d3.csvParse无法解析CSV文件求助

核心问题：误解了d3.csvParse的作用 #

d3.csvParse() 接收的是CSV格式的字符串，不是文件路径。你之前直接传路径给它，自然会得到空数组（因为路径字符串不是合法CSV格式）。

方案1：服务器组件中直接读取文件（推荐，App Router默认是服务器组件） #

在Next.js服务器组件中，可直接通过Node.js的fs模块读取本地CSV文件，再用d3解析：

import fs from 'fs/promises';
import path from 'path';
import { csvParse } from 'd3';

export default async function Home() {
  // 构建CSV文件的绝对路径
  const csvPath = path.join(process.cwd(), 'src/data/us-counties.csv');
  // 读取文件内容
  const csvContent = await fs.readFile(csvPath, 'utf8');
  // 解析CSV字符串
  const data = csvParse(csvContent);
  
  console.log(data); // 正常输出解析后的数据

  return (
    <div>{/* 你的组件内容 */}</div>
  );
}

方案2：客户端组件中通过fetch加载（适合客户端动态加载场景） #

如果你的组件是客户端组件（添加了'use client'指令），需要把CSV文件放到public文件夹，再用fetch请求：

1. 将us-counties.csv移至public/data/目录（即project/public/data/us-counties.csv）
2. 客户端组件代码：

'use client';

import { useEffect, useState } from 'react';
import { csvParse } from 'd3';

export default function Home() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const loadData = async () => {
      // 请求public文件夹下的CSV文件
      const response = await fetch('/data/us-counties.csv');
      const csvContent = await response.text();
      const parsedData = csvParse(csvContent);
      setData(parsedData);
    };

    loadData();
  }, []);

  console.log(data);

  return (
    <div>{/* 你的组件内容 */}</div>
  );
}

解决直接导入CSV的类型错误和Loader问题 #

若想通过import方式导入CSV，需完成两步配置：

1. 添加类型声明：在项目根目录或src目录下创建typings.d.ts文件，内容如下：

declare module '*.csv' {
  const content: string;
  export default content;
}

2. 配置webpack loader：先安装依赖：

npm install csv-loader --save-dev

然后修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.csv$/,
      use: ['csv-loader'],
    });
    return config;
  },
};

export default nextConfig;

之后即可正常导入并解析：

import csvContent from '../data/us-counties.csv';
import { csvParse } from 'd3';

export default function Home() {
  const data = csvParse(csvContent);
  console.log(data);

  return <div>{/* 组件内容 */}</div>;
}

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