я есть проект React в комплекте с Webpack.

У меня есть компонент, который я хочу, чтобы он отображал компоненты динамически. В моем случае путь компонента происходит от реквизита.

Кроме того, эти компоненты не включены в файл моего проекта .js; они являются внешними компонентами / библиотеками React.

Я пробовал импорт Dynamic ES6:

componentWillReceiveProps(nextProps){
    if(nextProps.pagesData && this.props.pagesData !== nextProps.pagesData && nextProps.pagesData.get('cards').count() > 0){

        // Getting the first card from the Immutable object
        let card = nextProps.pagesData.getIn(['cards', 0]);

        // Getting the cardType which can be: '/path/index.js'
        let cardType = card.get('card_type');

        // ES6 Dynamic import
        import(cardType)
            .then(module => {
                 this.setState({ asyncCard: module.default });
             })
    }
}

Это не работает, потому что для импорта нужен статический маршрут.

Затем я попытался с потребностью:

let dynamicComponent = require(cardType);

Что не работает, потому что (я предполагаю) Webpack пытается найти его в основной комплект.

Это вообще возможно сделать?

ОбновитьПохоже, это может работать (cardType - это index.js - компонент React):

import(`/home/user/_apps/module/react-module/lib/${cardType}`)

Webpack создает другой пакет (чанк), включая код index.js и все его зависимости.

Но это не решает мой первоначальный вопрос.

Редактировать 2: Импорт сверху фактически игнорирует последнюю переменную, а Webpack создает фрагменты каждого файла внутри / lib.