«Не удается найти модуль» при импорте файла .csv в Create React App

Question

Я пытаюсь импортировать CSV для использования с библиотекой D3 для создания диаграммы в проекте Create React App, но при импорте файла выдается ошибка «Не удается найти модуль», даже если путь к файлу CSV указан правильно .

У меня такое чувство, что это может быть связано с настройкой CRA Webpack под капотом, но похоже, что это использует загрузчик файлов, поэтому я не уверен, в чем проблема. Файл данных находится в каталоге CRA sr c.

Журнал консоли в приведенном ниже коде работает с правильными данными, что означает, что данные должны быть доступны. После этого выдается ошибка (хотя путь к 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 на ваш веб-сервер и затем fetch во время его выполнения.

Если этот CSV велик (больше чем несколько килобайт), то это также лучший вариант с точки зрения производительности / разделения кода.

Answer 2

Спасибо Нику Рибалу за его ответ, я нашел похожее решение, переместив мой файл данных в папку publi c, а затем сослался на него через переменную среды PUBLIC_URL.

Я использовал метод D3 CSV который будет получать данные из URL-адреса, если он передан, а не использовать выборку и анализировать ее как текст.

С методом CS3 D3:

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;