Question

我正在尝试导入CSV以与D3库一起使用，以在Create React App项目中创建图表，但是即使CSV文件的路径正确，导入文件也会引发“找不到模块”错误

我觉得这可能与CRA的Webpack配置有关，但是看起来这是使用文件加载器，所以我不确定问题出在哪里。数据文件位于CRA的src目录中。

下面代码中的控制台日志正在使用正确的数据运行，这意味着必须访问数据。此后引发错误（尽管在我的编辑器中CSV的路径用红色下划线标出）。

我正在使用TypeScript，但我认为这与问题无关。

import React from 'react';
import * as d3 from 'd3';
import CSVData from '../data/data.csv';

const BarChart: React.FC = () => {
  d3.csv(CSVData).then(res => {
    console.log(res);
  });
  return <div>Test</div>;
};

export default BarChart;

Answer 1

CRA不支持导入.csv文件。在不从CRA弹出的情况下，最好的选择是将该文件以及yarn/npm build的结果复制到Web服务器，然后在运行时fetch对其进行压缩。

如果CSV大（超过几个kb），那么从性能/代码拆分角度来说，它也是更好的选择。

Answer 2

感谢尼克·里巴尔（Nick Ribal）的回答，我找到了一种类似的解决方案，将数据文件移到公用文件夹中，然后通过PUBLIC_URL环境变量进行引用。

我使用了D3 CSV方法，该方法将通过URL获取数据，而不是使用提取并将其解析为文本。

使用D3 CSV方法：

import React, { useState } from 'react';
import { DSVRowArray } from 'd3';
import * as d3 from 'd3';

type CSVData = DSVRowArray | null;

const BarChart: React.FC = () => {
  const initialState: CSVData = null;
  const [fetchedCSVData, setFetchedCSVdata] = useState<CSVData>(initialState);

  if (!fetchedCSVData) {
    d3.csv(`${process.env.PUBLIC_URL}/data/data.csv`).then(res => {
      setFetchedCSVdata(res);
    });
  }
  return <div>Test</div>;
};

export default BarChart;

没有D3 CSV方法：

import React, { useState } from 'react';

type CSVData = string | null;

const BarChart: React.FC = () => {
  const initialState: CSVData = null;
  const [fetchedCSVData, setFetchedCSVData] = useState<CSVData>(initialState);

  if (!fetchedCSVData) {
    fetch(`${process.env.PUBLIC_URL}/data/data.csv`)
      .then(res => res.text())
      .then(stringData => {
        console.log(stringData);
        setFetchedCSVData(stringData);
      });
  }

  return <div>Test</div>;
};

export default BarChart;

在Create React App中导入.csv文件时，“找不到模块”

2 个答案: