Uncaught (в обещании) TypeError: Не удалось получить динамически импортированный модуль

Question

Я пытаюсь динамически получать SVG-изображения в моем компоненте реагирования, но пока я получаю эту ошибку Uncaught (в обещании) TypeError: Не удалось получить динамически импортированный модуль . Это мой пример кода

import React from 'react';
import { CustomSvgIcon } from '../../util/CustomSvgIcon';


const Icon = ({ iconName }: IconProps) => {
  const [menuIcon, setIcon] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (iconName) {
      import(`../../../assets/svg/${iconName}.svg`)
        .then((bla) => setIcon(bla.default))
        .catch((error) => console.log(error));
    }
  }, []);
  return (
    <CustomSvgIcon>
      {menuIcon ? menuIcon : null}
    </CustomSvgIcon>
  );
};

Этот код прекрасно работает в сборнике рассказов, но когда я использую его в компоненте реакции, он не загружает изображения, и эта ошибка появляется. Что я делаю не так?

Answer 1

Эта проблема решается установкой некоторых правил в webpack.config. Это была проблема с .svg. Это правило, которое решило проблему:

{
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            icon: true,
          },
        },
      ],
    }