时间戳

首页 > 解决方案 > 在 Create React App 中导入 .csv 文件时出现“找不到模块”

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

问题描述

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

标签： csvcreate-react-appes6-modules

解决方案

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

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

推荐阅读