React项目中使用D3读取本地CSV文件遇404错误求助

问题场景 #

项目文件夹结构：

• my_folder_name
  • Utils.ts
  • test_csv_file.csv

执行以下代码读取CSV时出现404错误：

import * as d3 from 'd3';

const getCSVData = () => {
 d3.csv('./test_csv_file.csv', function (data) {
    console.log(data);
  });
}

错误信息：GET http://localhost:3000/test_csv_file.csv net::ERR_ABORTED 404 (Not Found)

解决方法 #

方法一：将CSV移至public文件夹 #

React项目的public目录是静态资源的根目录，放在这里的文件会被直接暴露到网站根路径下：

1. 把test_csv_file.csv移动到项目根目录的public文件夹中（可在public下创建data子文件夹分类管理）。
2. 修改d3.csv的路径为根相对路径：

import * as d3 from 'd3';

const getCSVData = () => {
  // 直接用根路径访问public下的文件
  d3.csv('/test_csv_file.csv', (data) => {
    console.log(data);
  });
}
// 如果放在public/data下，路径改为'/data/test_csv_file.csv'

方法二：通过import引入CSV文件（TypeScript支持） #

直接在代码中import CSV文件，Webpack会自动处理文件路径：

1. 在Utils.ts中引入CSV文件：

import * as d3 from 'd3';
// 引入CSV文件，获取打包后的正确路径
import csvFile from './test_csv_file.csv';

const getCSVData = () => {
  d3.csv(csvFile, (data) => {
    console.log(data);
  });
}

2. 若使用TypeScript，需添加类型声明文件：
   在项目src目录下创建types.d.ts，写入以下内容：

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

原因说明 #

React项目（如Create React App）的打包机制会对src目录下的文件进行编译处理，非代码文件不会直接被部署到网站根目录。直接使用相对路径./test_csv_file.csv会被解析为网站根路径下的文件，而该文件实际不存在，因此触发404错误。

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