如何在 React 组件中导入数组（带有图像名称的数组，从文件夹中读取）

问：

在这里，我读取文件夹中的所有图像，并使用图像名称创建一个数组。然后我想向我的 react 组件发送一个数组以在我的选择中显示它

const fs = require('fs');
const path = require('path');


const PictureObjectCreator = (pathTo) =>  {
  let arrayOut = []
  let allFiles = fs.readdirSync(pathTo)


  for (let i = 0 ; i < allFiles.length ; i+=1){
    allFiles[i] = path.basename(allFiles[i] , '.webp');
    allFiles[i] = allFiles[i].split('_').join(' ')
    arrayOut[i] = {name: allFiles[i] , value: allFiles[i]}
  }

  return arrayOut
}


let gameMode3Path = '../../images/imageForGameMode3'

const gameMode1Select = PictureObjectCreator(gameMode1Path);
const LCEGOList = PictureObjectCreator(gameMode3Path);

exports.LCEGOList = LCEGOList

在这里，我能够输出我的数组

const List = require('./LCDirectoryFileNameReader')
const LCEGOList = List.LCEGOList

console.log(LCEGOList);

但是当我尝试在我的 react 组件中导入数组时，出现了这个错误

未捕获的 TypeError：fs.readdirSync 不是函数

请给我建议如何处理，我将不胜感激。

我尝试像这样导入React

const List = require('./LCDirectoryFileNameReader')
const LCEGOList = List.LCEGOList

和这个

import { LCEGOList } from "../../LCDitectoryFileNameReader/test";

但在这两种情况下，我都收到了一个错误