Importing ES6 modules causes webpage styling to break

[jeremy-smith-maco]

First of all I am fairly certain it's not an issue with the library but more than likely how our environment is set up but I have been trying to fix this issue for quite a while now to no avail so I have resorted to posting an issue here in the hopes that someone can suggest or point out what we are doing incorrectly.

We are currently testing out multiple graphing libraries for our application and the first few worked fine but when going to use amCharts using the ES6 imports it completely broke the styling for the whole website but no errors were logged to the console. If we include the CDN version in script tags on the page we are testing it works like a charm. Import code looks like:

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

We are testing locally against our live application which currently codes everything in ES6 and transpiles down using Laravel Mix which uses Webpack and Babel to do so. Our .babelrc file looks like:

{
  "plugins": ["@babel/plugin-transform-async-to-generator"],
  "presets": ["@babel/preset-env"]
}

We are using the default Webpack config that is used by Laravel Mix to transpile. We did try using the same Webpack config as specified in the Using Webpack article but that also did not work.

We have researched many solutions but nothing has worked. I think it is because the module we are importing is ES6 module but I am not exactly sure. We also have the same issue when attempting to import FusionCharts using their sample code but can get around that by using their CJS method instead of the ES6 module method.

Also (not sure if related) but when we use the CDN it seems to change the position of the icons in our sidebar so not sure why that is happening either.

We have tried explicitly specifying in the Webpack config to use the babel loader for the am4charts module but it still had the same result. We are not sure what to do to fix the issue. Any suggestions or help would be appreciated.

Using CDN (what it should look like) (notice weird padding in sidebar):

Using ES6 modules:

[brecriffs]

Having this same issue! Any luck fixing it?

[tinyfly]

I'm also having the same issue and I'm using laravel-mix too. Looking at my css files in the browser devtools network tab I'm seeing that they have no css content but only a /* (ignored) *//* (ignored) *//* (ignored) */ comment.

Also if I temporarily remove the amcharts export files from the laravel-mix pipeline like so:

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

Then everything renders like normal just without the export functionality. Which makes me think that something about laravel-mix's webpack config is choking on the export-related js files which stops it from compiling the sass/css.

[brecriffs]

This worked for me, not sure if it's the same issue.

remove node_modules
remove package-lock.json
npm install
npm update acorn --depth 20
npm dedupe

Info here:
webpack/webpack#8656

Also, downgrading to webpack 4.28 worked.

[tinyfly]

@brecriffs Thanks for that but it doesn't seem to help in my case. The issue you linked to seems to show build errors but I don't get any build errors. I get a successful build but my css files are empty and the only thing that works is excluding the export files.

[ghost]

@tinyfly, don't you remember the solution?

@martynasma, you've closed the issue w/o any answer. Do you know the solution?

I have the same issue.
Amcharts: 4.10.5
Webpack: 4.43.0

UPD:
For people who look for the solution.
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.

[tinyfly]

@pavelsavushkinblastmotion I believe it has something to do with one of the core webpack plugins that Laravel mix uses and they were having to wait until mix upgraded to use webpack 5 or something.

I ended up just running the build manually with the export files in there so they are generated and commit them permanently into my repo. Then I have them removed using the technique in my previous comment for the regular build so the rest of the files are correctly compiled. Amcharts async loads those export files so everything works out.

Though I do have to remember that every time I update the Amcharts package I need to regenerate and commit those export files.

Laravel Mix 6 with Webpack 5 support is currently in alpha but I've not tested it yet to see if it fixes things.

[ghost]

@tinyfly gotcha. Thanks for the reply!