在 Create React App 中导入 .csv 文件时出现“找不到模块”答案

【问题标题】："Cannot find module" when importing .csv file in Create React App在 Create React App 中导入 .csv 文件时出现“找不到模块”
【发布时间】：2020-02-14 16:41:57
【问题描述】：

我正在尝试导入 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;

【问题讨论】：

标签： csv create-react-app es6-modules

【解决方案1】：

CRA 不支持导入 .csv 文件。在不退出 CRA 的情况下，您最好的选择是将该文件与 yarn/npm build 的结果一起复制到您的 Web 服务器，然后在运行时 fetching 它。

如果 CSV 很大（超过几 kb），那么它在性能/代码拆分方面也是更好的选择。

【讨论】：

【解决方案2】：

感谢 Nick Ribal 的回答，我找到了一个类似的解决方案，将我的数据文件移动到公用文件夹中，然后通过 PUBLIC_URL 环境变量引用它。

我使用了 D3 CSV 方法，如果传递一个 URL，它将从 URL 获取数据，而不是使用 fetch 并将其解析为文本。

使用 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;

【讨论】：