我正在尝试导入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;
感谢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;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句