TypeError: fs.readdirSync 不是 React js 的函数答案

【问题标题】：TypeError: fs.readdirSync is not a function React jsTypeError: fs.readdirSync 不是 React js 的函数
【发布时间】：2020-12-23 18:51:30
【问题描述】：

我想通过动态导入将文件夹中的所有图片导入到组件中，如下所示：

index.js

const testFolder = './2020/';
const fs = require('fs');
const path = require('path');
const files = fs.readdirSync(testFolder);
const allowedExts = ['.png', '.jpg', 'svg'] // add any extensions you need
const modules = {};

if (files.length) {
  let filterThruFiles = files.filter(file => allowedExts.indexOf(path.extname(file)) > -1)
  filterThruFiles.forEach(file => modules[file] = `./${file}`);
}

module.exports = modules;
let modulesStringify = JSON.stringify(modules);
fs.writeFileSync('pics-url-list.json', modulesStringify);

我得到一个带有路径的对象并将其写入文件，效果很好：

//pics-url-list.json
{
  "1-1.jpg":"./1-1.jpg",
  "1-2.jpg":"./1-2.jpg",
  "1-3.jpg":"./1-3.jpg"
//and so on
  }

但是当我运行 npm start 时，我得到了这个错误。主要问题是如何在 React 组件中访问这个 .json 文件？现在在 App.js 中没有 console.log 工作，它只显示这个关于 fs.readdirSync 的错误

//App.js component
import picList from '../images/pics-url-list.json';
console.log(picList);

【问题讨论】：

fs 等是 node.js 的东西，只能在服务器端完成。您无法使用这些方法（通过浏览器）使用用户的文件系统。
@Joe 所以没有办法做到这一点？这基本上是制作一个json文件并在组件中访问它，也许应该有其他方式？

标签： javascript node.js reactjs webpack

【解决方案1】：

客户端应用程序无法使用类似 fs 的模块。有一种方法可以使用require.context 动态导入所有图像例如，

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

【讨论】：