Optimizing React App’s Size In Production with Amcharts

I’m using amcharts (amcharts4) with React app(generated using cra).

I was able to successfully exclude few dependencies(cpexcel, canvg, pdfmake) using webpack Externals in webpack.config file (node_modules/react-scripts/config/webpack.config.js) like this:

externals: [
      function (context, request, callback) {
      if (/cpexcel|canvg|pdfmake/.test(request)) {
        return callback(null, "commonjs " + request);
      }
      callback();
    }]

I also want to exclude the xlsx dependency, but it throws error while building with this configuration:

externals: [
      function (context, request, callback) {
      if (/xlsx|canvg|pdfmake/.test(request)) {
        return callback(null, "commonjs " + request);
      }
      callback();
    }],

Error is:

$ react-scripts build
Creating an optimized production build...
Failed to compile.

chunk runtime-main [entry]
Cannot convert undefined or null to object

I’m not using any csv feature of amcharts.

Is there any other possible way to exclude xlsx (without using standalone library and removing manually) in amcharts ?

Answer

The error was because of react-chartjs-2. I was trying few chart libraries and I forgot to remove the library.

Successfully excluded the xlsx library.

externals: [
      function (context, request, callback) {
      if (/xlsx|canvg|pdfmake/.test(request)) {
        return callback(null, "commonjs " + request);
      }
      callback();
    }],