Ленивая загрузка: не удается загрузить динамический модуль
Я пытаюсь динамически загружаться в свою панель инструментов, используя компоненты React.lazy() и Suspense. Он очень хорошо работает с жестко заданным значением, но не с переменной. Я немного потерял дар речи прямо сейчас. Наверное глупая ошибка!
Работает:
const WidgetComponent = React.lazy(() => import('../../../widgets/dummy/Dummy'));
Не работает:
// widget.path === '../../../widgets/dummy/Dummy'
const WidgetComponent = React.lazy(() => import(widget.path));
Не работает также:
const WidgetComponent = React.lazy(() => import(`${widget.path}`));
Я могу добавить одну вещь: реквизит виджета заполняется из файла json в общей папке.
попробуйте `${widget.path}` вместо widget.path
Работает: импорт(../../../widgets/${widget.component})); Не работает: импорт(${widget.path}));
`${widget.path}` работает, проверьте здесь codeandbox.io/s/reactlazy-forked-1yq4i?file=/src/…
@ARZMIImad хорошо, я попробую, может быть, компилятор, который меня балует...
Ответы 1
Хорошо, с помощью @Ajeet Shah я решил свою проблему.
Вместо этого я создал новое свойство с именем компонента и сделал это:
const WidgetComponent = React.lazy(() => import(`../../../widgets/${widget.component}`));
Не самое элегантное решение, но оно работает.
Использование переменной не сработает. Использование выражения должно работать. Ответ на похожую задачу . Еще один. Но я думаю, что лучше написать:
React.lazy(() => import('../../../widgets/dummy/Dummy'));.