Broken styles with amcharts4

Question

I'm trying to import amcharts' parts in the vue component like that:

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

but it breaks styles of the site: final css file contains only /* (ignored) *//* (ignored) *//* (ignored) */ instead of the actual styles. I've found a thread on the github with the same problem, but it was close w/o any resolution.

Could anyone help me to figure out the reason of this behavior and the actual fix?

amcharts: 4.10.5; Webpack: 4.43.0

Answer 1

So, I've found a solution for this.

You need to remove those generated files (if they were created):

public/vendors~xlsx.js
public/xlsx.js
public/vendors~pdfmake.js
public/vendors~canvg.js

Add this to the webpack configuration (for laravel-mix add this inside the mix.webpackConfig({...}) construction):

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

More details are here.