Dynamic import with an unrelated file

Question

I have a React project bundled with Webpack.

I have a component that I want it to display components dynamically. In my case, the component path comes from props.

Also, these components are not related in my project .js file. they are external components of React / libaries.

I tried importing 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 }); }) } } 

This does not work, because import needs a static route.

Then I tried with the requirement:

 let dynamicComponent = require(cardType); 

Which does not work because (I suppose) Webpack is trying to find it in the main bundle.

Is it possible to do this?

Update : it looks like this might work (cardType is index.js is a React component):

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

Webpack creates another package (chunk), including the index.js code and all its dependencies.

But this really does not solve my initial question.

Change 2 . The import from above actually ignores the last var and Webpack makes chunks of each file inside / lib.

Answer 1

Finally I came up with a solution.

LoadJS library. You can also use $ script .

Library project (external components): index.js:

 import App from './App'; export const MyComponentLib = { App }; 

App.jsx:

 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; export default class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } 

In the webpack library configuration file (production) added:

 libraryTarget: 'umd', 

The main project file (main.js):

 componentWillReceiveProps(nextProps){ if(nextProps.pagesData && this.props.pagesData !== nextProps.pagesData && nextProps.pagesData.get('cards').count() > 0){ // Getting all asyncCards from state let currentCards = cloneDeep(this.state.asyncCards); // Immutable "get" function - getting cards from nextProps nextProps.pagesData.get('cards').forEach(card => { // Getting card_type, which in this case is the filename let cardType = card.get('card_type'); // Do we have this card already in the state object? if(!hasIn(currentCards, cardType)) { // AsyncLoading the card file loadjs(`/custom/1/${cardType}.js`, cardType, { success: () => { // Cloning App function (the component) currentCards[cardType] = window.MyComponentLib.App.bind({}); this.setState({ asyncCards: currentCards }) } }) } }) } }