使用 Reactjs 在 Loadable 中使用对象属性时出错答案

【问题标题】：Getting error using object property in Loadable using Reactjs使用 Reactjs 在 Loadable 中使用对象属性时出错
【发布时间】：2019-04-20 14:58:06
【问题描述】：

我有以下数组，我正在尝试map()。

const componentsNavConfig = [
  {
    id    : 'dashboard',
    title : 'Dashboard',
    type  : 'item',
    icon  : 'dashboard',
    url   : '/dashboard',
    path  : 'layouts/Dashboard',
  },
];

我正在尝试实现以下代码。

配置.js

const items = componentsNavConfig.map( item => ({
  path: item.url,
  component: Loadable({
    loader: () => import(item.path)
  })
}));

问题是它抛出以下错误。

config.js 关键依赖：依赖的请求是一个表达式

我认为是在抱怨这条线

loader: () => import(item.path)

因为当我将上面的行替换为下面的行时，一切正常。

loader: () => import('layouts/Dashboard')

错误未出现，代码按预期运行。

这里发生了什么？以及如何在表达式中使用像 item.path 这样的变量而无需对路径进行硬编码？

编辑：正如答案中所建议的，我也没有成功尝试使用

loader: () => import(`${item.path}`)

我得到了同样的结果。

Edit2：我做了一些研究，看起来在 ES6 和 Webpack 中使用动态导入可能存在一些问题。所以，现在我想知道我在这里的目标是否可以实现。

Here is a relevant SO question.

Here is a blog article.

Edit3：更多研究

This might be the solution in the docs. 任何使用这些文档来帮助我弄清楚如何做到这一点的答案仍然非常有效，我们将不胜感激。

This is specific to React.即react-loadable。

【问题讨论】：

标签： javascript string reactjs object loader

【解决方案1】：

我不完全确定，但尝试一下可能会解决问题：

loader: () => import(`${item.path}`)

请参阅此relevant case 以供参考。

【讨论】：