Create React App 프로젝트 내에서 차트를 만들기 위해 D3 라이브러리와 함께 사용할 CSV를 가져 오려고하는데 파일을 가져 오면 CSV 파일의 경로가 정확하더라도 "Cannot find module"오류가 발생합니다.
나는 이것이 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 환경 변수를 통해이를 참조하여 유사한 솔루션을 찾았습니다.
나는 이것을 텍스트로 가져오고 구문 분석하는 대신 URL을 전달하면 URL에서 데이터를 가져 오는 D3 CSV 방법을 사용했습니다.
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] 삭제
몇 마디 만하겠습니다