Cannot load external module through require js
-
15-04-2021 - |
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 ?
Solution
Turns out, highcharts needs a special configuration :
requirejs-config.js
var config = {
packages: [{
name: 'highcharts',
main: 'highcharts'
}],
paths: {
'highcharts': 'http://code.highcharts.com',
}
}
OTHER TIPS
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
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange