模块未定义用于从外部包动态导入命名导出答案

【问题标题】：Module is undefined for dynamic import of a named export from an external package模块未定义用于从外部包动态导入命名导出
【发布时间】：2020-05-02 18:24:00
【问题描述】：

我想从react-icons 导入图标，该图标由与来自react-icons 的图标组件的命名导出相对应的字符串数组定义。我涵盖了来自react-icons 的每个图标库的案例。这是 FontAwesome 的一个案例。

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

上面的代码 sn -p 被发现是here 作为动态导入命名导出的方法。

我希望这会返回一个与icon 指定的图标相对应的组件，例如let icon = 'FaPhp'; 发生的事情是一个错误，它说： TypeError: Cannot read property 'FaPhp' of undefined

【问题讨论】：

FWIW 您的错误意味着 module.Components 未定义。我建议将 console.log(JSON.stringify(Object.keys(module))) 添加到您的 then lambda 以查看模块对象中的实际内容。
应该是module.exports 而不是module.Components
@sjagr 我正在使用组件，否则我只有一个字符串，它是所需命名导出的名称。
@Brandon 谢谢你，我会试试的。我可能只需要从“react”导入组件。
module[icon] 就是你想要的。

标签： reactjs lazy-loading dynamic-import react-icons

【解决方案1】：

React 要求所有组件都以大写字母开头。因此，我将迭代器 icon 重命名为 Icon，然后我省略了 module.Components[icon] 并用 module[Icon] 替换它，这解决了我的问题！

我从this post 中发现了这一点，并在意识到我正在通过模块访问元素库后决定使用数组访问表示法。

【讨论】：