如何使用webpack在React应用程序中异步需要模块？

Question

In a React application, I would like to import a library called flowtime.js only for a certain route/path and then execute some more code. This library has a dependency called Brav1toolbox . Neither is available on npm.

My strategy is to use webpack's require in the Component's componentDidMount method. Here is my attempt :

componentDidMount() {
  require.ensure([ 'local/relative/path/to/lib/brav1toolbox.js'], function(require) {
    var f = require('local/relative/path/to/other/lib/Flowtime.js/js/flowtime.js');
  });
}

which results in the following error.

Uncaught (in promise) ReferenceError: Brav1Toolbox is not defined

So Flowtime is being loaded but is not able to find Brav1Toolbox.

I am not experienced with either React or webpack so perhaps I have a misconception. I am trying to use webpack to only load those libraries if my users visit a path where those libraries are needed. This is the webpack guide I used as reference.

Thank you for trying to help.

Answer 1

It depends on your version of webpack, but you are on the right track with code splitting / route chunking.

For webpack v2, I would recommend checking out the Webpack documentation .

With webpack 2 you can require the libraries within the react containers / components where they are needed, and then dynamically load the code based on the path. An example of how you might be able to do this with react-router via two example routes, eg "/home" and "/about", is below:

<Route path="/home" getComponent={(nextState, callback) => {
    require.ensure([], require => {
        callback(null, require("./containers/home"));
    }, "Home");
}} />
<Route path="/about" getComponent={(nextState, callback) => {
    require.ensure([], require => {
        callback(null, require("./containers/about"));
    }, "About");
}} />