React项目读取本地CSV文件报错：无法解析fs模块

你遇到的Module not found: Error: Can't resolve 'fs'错误，核心原因是**fs是Node.js专属的文件系统模块，浏览器环境根本不存在这个模块**。React应用运行在浏览器中，出于安全限制，浏览器不允许前端代码直接读取用户本地磁盘的文件（比如你写的F:/result.csv），所以你没法在前端代码里用fs做文件读取操作。

下面分两种常见场景给出解决办法：

场景1：CSV是项目自带的静态文件 #

如果result.csv是你项目里的固定资源，把它放到React项目的public文件夹下，用fetch异步读取后解析：

import React, { useState, useEffect } from 'react';
import ReactCardSlider from 'react-card-slider-component';
// 用papaparse替代jquery-csv，更适配前端环境
import Papa from 'papaparse';

function App(){
  const [slides, setSlides] = useState([]);

  useEffect(() => {
    // 读取public文件夹下的csv文件
    fetch('/result.csv')
      .then(res => res.text())
      .then(csvText => {
        // 解析CSV为对象数组（header: true表示第一行是表头）
        const parsedData = Papa.parse(csvText, { header: true }).data;
        setSlides(parsedData);
      })
      .catch(err => console.error('读取CSV失败:', err));
  }, []);

  const sliderClick = (slider) => {
    alert("hello world");
  }

  return (
    <div id="body">
      {/* 加载完成前显示占位内容 */}
      {slides.length > 0 ? <ReactCardSlider slides={slides} /> : <div>加载中...</div>}
    </div>
  );
}

export default App;

注意事项： #

1. 先安装papaparse：执行npm install papaparse
2. 必须把result.csv放到项目根目录的public文件夹里，否则fetch会找不到文件

场景2：需要用户上传本地CSV文件 #

如果是要读取用户自己本地的CSV文件（比如用户选择F盘的文件），需要用文件上传组件让用户主动选择：

import React, { useState } from 'react';
import ReactCardSlider from 'react-card-slider-component';
import Papa from 'papaparse';

function App(){
  const [slides, setSlides] = useState([]);

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 用浏览器原生的FileReader读取文件内容
    const reader = new FileReader();
    reader.onload = (event) => {
      const csvText = event.target.result;
      const parsedData = Papa.parse(csvText, { header: true }).data;
      setSlides(parsedData);
    };
    reader.readAsText(file);
  };

  const sliderClick = (slider) => {
    alert("hello world");
  }

  return (
    <div id="body">
      {/* 文件上传按钮，只允许选择csv文件 */}
      <input type="file" accept=".csv" onChange={handleFileUpload} />
      {slides.length > 0 ? <ReactCardSlider slides={slides} /> : <div>请上传CSV文件</div>}
    </div>
  );
}

export default App;

原代码的其他问题修正 #

1. 你同时用了import fs from "fs"和const fs = require('fs')，属于重复引入，而且完全没必要，直接删掉即可
2. jquery-csv更适合Node.js环境，前端用papaparse这类专门适配浏览器的库会更稳定

内容的提问来源于stack exchange，提问作者Feres rasdzi