How to integrate amCharts4 in Aurelia CLI v2.0.2 using Require.js

Help Requests
1

Does anyone know how to configure amCharts4 in Aurelia CLI v2.0.2 using Require.js?

I’ve tried installing it using npm and using it directly but I get this error:

[PackageAnalyzer] The "@amcharts/amcharts4" package has no valid main file, fall back to index.js.
2

The npm package is strange, it doesn’t have “main” field in package.json.

If you follow the doc Using TypeScript or ES6 – amCharts 4 Documentation
it asks you to import internal files directly. (If you import @amcharts/amcharts4, bundler will try to load main file which doesn’t exist.).

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

The other option is to use prepend https://aurelia.io/docs/cli/cli-bundler/dependency-management#prepend to load

"node_modules/@amcharts/amcharts4/core.js",
"node_modules/@amcharts/amcharts4/charts.js",

As legacy lib, then use global vars am4core and am4charts directly.

1 Like
3

Thank you @huochunpeng . I’ve tried your suggested approach with prepend and it does not seem to work, there aren’t any build errors but the global variables does not seem to be there. I tried as well the second approach using Shim https://aurelia.io/docs/cli/cli-bundler/dependency-management#shim and it can’t find the files in the path specified.

4

My bad, just checked the package, there is build error for me if I put it in prepend

 "prepend": [
          "node_modules/@amcharts/amcharts4/core.js",
          "node_modules/@amcharts/amcharts4/charts.js",
          "node_modules/regenerator-runtime/runtime.js",
          "node_modules/promise-polyfill/dist/polyfill.min.js",
          "node_modules/requirejs/require.js"
        ],

The bundler complains keyword “export” because amcharts4 shipped code in ESM format.

Unfortunately,

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

does not work either because cli-bundler uses esprima which doesn’t understand some of amcharts’s new js syntax (I guess amcharts compiled to quite latest JS syntax).

I tested with dumber bundler (The successor of cli-bundler, Aurelia 2 moved from cli-bundler to dumber). The above imports works with dumber.

For cli-bundler, the only option right now is to use CDN in your html head, that will give you the global vars.

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>