Модуль не определен для динамического c импорта именованного экспорта из внешнего пакета

Question

Я хочу импортировать значки из react-icons, как определено массивом строк, соответствующих именованным экспортам компонентов значков из react-icons. Я покрываю футляры для каждой библиотеки иконок от react-icons. Это пример случая для FontAwesome.

lazy(() => import('react-icons/fa').then(module => ({ default: module.Components[icon]})))

Приведенный выше фрагмент кода был найден здесь как метод динамического импорта именованных экспортов.

Я ожидаю, что это вернет компонент, соответствующий значку, указанному icon, например let icon = 'FaPhp'; В результате возникает ошибка, которая говорит: TypeError: Cannot read property 'FaPhp' of undefined

Answer 1

React ожидает, что все компоненты будут названы с заглавной буквы. Поэтому я переименовал итератор icon в Icon, затем пропустил module.Components[icon] и заменил его на module[Icon], что решило мою проблему!

Я понял это из этого поста и решил использовать нотацию доступа к массиву после того, как понял, что обращаюсь к библиотеке элементов через модуль.