Eu tenho um projeto React incluído no Webpack.

Eu tenho um componente que eu quero que ele renderize componentes dinamicamente. No meu caso, o caminho do componente vem de adereços.

Além disso, esses componentes não estão incluídos no arquivo .js do meu projeto; eles são componentes / bibliotecas externos do React.

Eu tentei a importação do 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 });
             })
    }
}

Isso não funciona porque a importação precisa de uma rota estática.

Então eu tentei com exigir:

let dynamicComponent = require(cardType);

O que não funciona porque (presumo) o Webpack tenta encontrá-lo no pacote principal.

Isso é possível?

Atualizar: Parece que isso pode funcionar (cardType é 'index.js' - um componente React):

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

O Webpack cria um pacote diferente (chunk), incluindo o código do index.js e todas as suas dependências.

Mas isso realmente não resolve minha pergunta original.

Editar 2: A importação acima ignora a última var e o Webpack cria partes de todos os arquivos dentro de / lib.