Как заставить Nextjs создать чанк для определенного модуля? - PullRequest
Новая
       36

Как заставить Nextjs создать чанк для определенного модуля?

0 голосов
/ 06 мая 2019

Я пытаюсь использовать динамический импорт для импорта различных модулей в зависимости от реквизита, переданного компоненту. Пути к компонентам хранятся в объекте 

const components = {
    'apple': './Apple.js',
    'orange': './Orange.js',
    // ...
}

Тогда 

// ...
import(components[this.props.type])
// ...

К сожалению, я получаю следующую ошибку:

Unhandled Rejection (Error): Cannot find module './Apple.js'

Исчезает, когда я явно указываю имя файла (import('./Apple.js')). Можно ли заставить nextjs обслуживать эти динамические модули?

1 Ответ

0 голосов
/ 11 мая 2019

Вам необходимо использовать утилиту dynamic из next/dynamic для динамического импорта в Next.js.Эта функция основана на библиотеке реагирующая загрузка и использует аналогичный синтаксис.

Самый простой способ динамического импорта компонента React в Next.js: 

const DynamicComponent1 = dynamic(import('../components/hello1'))

Есливы хотите импортировать модуль, который не является компонентом React, чем вам необходимо использовать настраиваемую функцию рендеринга : 

const DynamicDeliveryOptions = dynamic({
  loader: () => import('../components/delivery-options'),
  render(props, loaded) {
    const options = loaded.deliveryOptions.map(
      option => <option key={option.id}>{option.title}</option>
    );
    return <select>{options}</select>
  },
});

Обратите внимание, что сигнатура функции render в Next.js отличаетсяиз его подписи в реагирующей на загрузку библиотеке (props - первый аргумент в Next.js).

Возвращаясь к вашему примеру: я думаю, что лучший способ импортировать несколько модулей - это объявить их все как динамическиемодули и условно отображаются в зависимости от пропущенных реквизитов (модули не будут загружены до визуализации).

...