React应用导入CSV/JSON数据供deck.gl绘图报错如何解决？

1. fs.createReadStream报错原因 #

fs是Node.js服务端专属的文件系统模块，浏览器环境不存在对应API，你写的React代码运行在浏览器端，自然无法调用该方法，该方案不适用前端场景。

2. JSON解析报错原因 #

报错Unexpected token < in JSON at position 0是因为你请求JSON文件时路径错误，服务器返回了404 HTML页面，HTML内容以<开头，无法被解析为JSON，和你本地JSON文件的格式无关。 #

可用实现方案 #

方案1：静态导入（适合固定的小体积数据文件） #

将CSV/JSON文件放在项目src目录下，直接通过ES模块导入：

• JSON文件无需额外依赖，直接导入即可使用：

// 直接导入JSON，导入的结果就是解析完成的JS对象
import rawData from '../data/RestructuredDataExample.json';

export function LoadJsonData() {
  console.log(rawData.nodes.length);
  return rawData;
}

• CSV文件需要借助papaparse解析，先安装依赖：npm install papaparse，再写解析代码：

import Papa from 'papaparse';
import csvFile from '../data/vertices.csv';

export async function LoadVertexData() {
  return new Promise((resolve) => {
    Papa.parse(csvFile, {
      header: true, // 自动将第一行作为字段名
      dynamicTyping: true, // 自动转换数字、布尔值类型
      complete: (res) => resolve(res.data)
    })
  })
}

方案2：运行时fetch加载（适合大体积文件或动态获取的资源） #

将CSV/JSON文件放在项目public/data目录下，fetch时使用绝对路径请求：

// JSON加载代码
export async function LoadJsonData(){
  const rawData = await fetch('/data/RestructuredDataExample.json');
  if (!rawData.ok) throw new Error('数据文件请求失败');
  const rawDataParsed = await rawData.json();
  return rawDataParsed;
}

// CSV加载代码
import Papa from 'papaparse';

export async function LoadVertexData() {
  const res = await fetch('/data/vertices.csv');
  if (!res.ok) throw new Error('数据文件请求失败');
  const csvText = await res.text();
  const parseResult = Papa.parse(csvText, {
    header: true,
    dynamicTyping: true
  })
  return parseResult.data;
}

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