Webpack require.ensure（代码拆分）与React组件不起作用？

Question

I have the below component. It is not rendering the product module in the dom and also not showing any error in the console.

And if I use ReactDOM.render(<ProductModule/>,document.getElementById('product-container')); it is working.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class ProductModuleWrapper extends Component {
    constructor(props) {
    }

    render() {
        return (
            <div className="product-container">
                {this.renderProductModules()}
            </div>
        );
    }

    renderProductModules() {
        require.ensure([],(require) => {
            var ProductModule =   require('../ProductModule').default;
            return ProductModule;
        },'productmodule');
    }
}

edit :

I think this is something to do with the async nature of the require ensure call, Please help

Answer 1

React will only re-render if component's state or props have been updated. In your example, neither is so it won't render the component as it's fetched asynchronously.

I recommend that you use this.state as described in this blog post: http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/