Cannot load external module through require js

Question

I'm trying to load highcharts in a custom admin form, but it comes out as undefined in my module.

My requirejs-config.js

var config = {
    paths: {
        'highcharts': 'http://code.highcharts.com/highcharts',
    },
    shim: {
        'highcharts': {
            deps: ['jquery']
        }
    }
}

How I'm calling it in my pthml:

<div id="customer-graph"></div>
<script type="text/javascript">
    require(["jquery","highcharts"], function ($, hc) {
        console.log(hc) //undefined
        hc.chart('customer-graph') //call chart on undefined
    });
</script>

I've looked at all the other posts about requirejs and highcharts and couldn't find any solution to my issue. Can you help ?

Answer 1

Turns out, highcharts needs a special configuration :

requirejs-config.js

var config = {
    packages: [{
        name: 'highcharts',
        main: 'highcharts'
    }],
    paths: {
        'highcharts': 'http://code.highcharts.com',
    }
}

Answer 2

Please use following code in requirejs-config.js file instead of current code and then check.

var config = {
    shim: {
        'highcharts': {
            exports: 'http://code.highcharts.com/highcharts' ,
            deps: 'jquery'
        }
    }
}

If this helps then hit like and accept as answer.

Enjoy your coding !!! :)

Thank you,
Hiren Patel