Search code examples
javascriptreactjswebpackamchartsamcharts4

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. source-map-explorer

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

Solution

  • 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();
    }],