Получение ошибки с использованием свойства объекта в Loadable с использованием Reactjs - PullRequest
Новая
       8

Получение ошибки с использованием свойства объекта в Loadable с использованием Reactjs

0 голосов
/ 17 ноября 2018

У меня есть следующий массив, который я пытаюсь map() включить. 

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

Я пытаюсь реализовать следующий фрагмент кода.

config.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 в выражении без необходимости жесткого кодирования пути?

Edit : Как и предлагается в ответе, я также безуспешно пытался использовать 

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

и я получаю тот же результат.

Edit2 : я провел некоторое исследование, и похоже, что могут быть некоторые проблемы с использованием динамического импорта в ES6 и Webpack,Итак, теперь я задаюсь вопросом, достижима ли моя цель здесь.

Вот соответствующий вопрос SO.

Вот статья в блоге.

Edit3 : дополнительные исследования

Это может быть решением в документах. Любой ответ, который использует эти документы, чтобы помочь мне разобратьсякак это сделать, все еще очень актуально и будет высоко оценено.

Это специфично для React. А именно, react-loadable.

1 Ответ

0 голосов
/ 17 ноября 2018

Я не совсем уверен, но попытка этого может решить проблему: 

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

См. соответствующий случай для справки.

...