почему я получаю эту ошибку при использовании require.context для импорта нескольких изображений для реагирования компонента

Question

Я хочу sh импортировать изображения в, скажем, папке активов, чтобы реагировать и выборочно передавать их в img-sr c при рендеринге компонента

, например, сказать:

import contacts from "../assets/icons/sidebar/contacts.svg"
import ideas from "../assets/icons/sidebar/ideas.svg"

становится :

import * as images from "../assets/icons/sidebar/"

с использованием индекса. js для инициализации папки:

с модулем fs Uncaught ReferenceError: __requireContext не определен с babel-require-context ... ошибка fs .readdir не является функцией с модулем fs +

const fs=require("fs") // or import * as fs from "fs" 
import registerRequireContextHook from "babel-plugin-require-context-hookregister"
registerRequireContextHook()

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

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

, которая выдает или должна выдавать словарь как объект при использовании в компоненте. В моем случае я использую реагирование 16.13, уже настроенный веб-пакет:

 module.exports = {
        ...other excess


        node:{
        fs: "empty",
        },
//also when on to add 
rules: [
...rules
parser:{
requireContext: true
},
]
    }

Как исправить ошибку веб-пакета require.context при запуске реакции или, что лучше, необходимо импортировать все изображения из папки, чтобы компонент реагировал без проблем. Пожалуйста, покажите код и конфигурацию, необходимые Спасибо