Webpack 4 - require.ensure is not a function

[kevindice]

Using react-scripts@2.1.1 from create-react-app, I was able to use the craco package to inject the route-loader into the Webpack configuration like so:

const path = require('path')
const routes = [path.resolve(__dirname, './src/routes.jsonrt')]

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.module.rules[2].oneOf = [
        {
          test: /\.jsonrt$/,
          loader: require.resolve('redux-json-router/lib/route-loader'),
          options: {
            chunks: true,
            debug: false
          }
        },
        ...webpackConfig.module.rules[2].oneOf
      ];
      return webpackConfig;
    }
  }
};

Note: The /\.jsonrt$/ avoided #6 altogether. It seems Webpack has a pre-loader step in which it prepends "export default " to any json which we don't want in this case.

The issue I experience is the error:

Unhandled Rejection (TypeError): __webpack_require__(...).ensure is not a function

Instead, a dynamic import() should be used in the loader.