Loading AmCharts with Webpack + Typescript

Question

I'm having some serious issues getting any charting library to work with webpack + typescript. I'm working with AmCharts right now and have already had to do work on the definitions file to get module syntax recognized by the typescript compiler.

My webpack config is set up like this:

"resolve": {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        "alias": {
            "config": path.join(__dirname, "../app"),
            "amcharts": "amcharts3/amcharts/amcharts.js"
        }
    },

And in the typescript: import AmCharts from "amcharts";

Now, this all compiles as expected, but when i do a console.log(AmCharts) I am left with an empty object.

Does anyone have any experience with getting AmCharts + webpack to play nicely, or a decent alternative charting library that meets the following criteria:

1. Decent Typescript definition support
2. Configurable via JSON
3. Plays nicely with ES6/Webpack/CommonJS

Thanks in advance!

Answer 1

I'm experiencing the same problem import AmCharts from 'amcharts3'

I get an empty object when printing to the console, with the following error:

Uncaught TypeError: _amcharts2.default.makeChart is not a function

ASNWER:

I was able to correct my issue by referencing amcharts using the window variable like so window.AmCharts.makeChart('chartdiv', options)

Hopefully you can use the same approach.

Answer 2

We use webpack + dynamic import + amChart config.

Copy amChart dependencies to build folder

    new WebpackPluginCopy([
        // Coppy amChart export dependency libs
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs',
            ignore: ['!*.min.js'],
            to: 'js/plugins/export/libs'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs/pdfmake/vfs_fonts.js',
            to: 'js/plugins/export/libs/pdfmake/vfs_fonts.js'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/shapes',
            to: 'js/plugins/export/shapes'
        }]),

module: {
    rules: [
        // Load amChart export style
        {
            test: /export.css/,
            use: ['style-loader', 'postcss-loader']
        }]}

Dynamically import amChart

Promise.all([

        //Dynamically import amchart dependencies
        import('amcharts3/amcharts/plugins/export/export.css'),
        import('amcharts3/amcharts/amcharts'),
        import('amcharts3/amcharts/serial'),
        import('amcharts3/amcharts/themes/light'),
        import('amcharts3/amcharts/plugins/export/export.min')


    ])

amChart config

path: '/js'