Добавление пользовательской функции и обещание React.lazy, вызывающее ошибку - PullRequest
Новая
       12

Добавление пользовательской функции и обещание React.lazy, вызывающее ошибку

0 голосов
/ 30 января 2019

Я использую React.lazy, чтобы сделать разбиение кода на основе маршрута .Кроме того, я добавляю минимальную задержку, как описано здесь .Цель задержки - показать анимацию загрузки в течение минимального промежутка времени при каждой отложенной загрузке.

Все работает нормально, если у меня есть каждый маршрут, как указано ниже: 

const ExampleComponent = React.lazy(() => 
  Promise.all([
    import('./ExampleRoute'),
    new Promise(resolve => setTimeout(resolve, MIN_DELAY))
  ])
  .then(([moduleExports]) => moduleExports));

Однако, когда я пытаюсь переместить свое обещание в функцию, все ломается: 

const lazyPromise = (route) =>
  Promise.all([
    import(route),
    new Promise(resolve => setTimeout(resolve, MIN_DELAY))
  ])
  .then(([moduleExports]) => moduleExports);

const ExampleComponent = React.lazy(() => lazyPromise('./ExampleRoute'));

Я получаю ошибку: Не удается найти модуль './ExampleRoute'

Что мне здесь не хватает?Любая помощь будет оценена.Спасибо!

1 Ответ

0 голосов
/ 31 января 2019

Я отвечаю на свой вопрос, чтобы помочь любому, кто столкнется с этим в будущем.В этом ответе подробно рассматриваются комментарии estus и Пракаш Шарма выше.

webpack должны быть статически построены и не поддерживают использование каких-либо переменных пути, включая строки запроса .Если значение недоступно до времени выполнения, webpack не сможет его увидеть.

Дополнительную информацию о том, как webpack обрабатывает разбиение кода, можно найти здесь .

...