At last, the solution has been found.
After a thorough search, it was discovered that nuxt and amcharts were utilizing different versions of webpack. The older version of webpack utilized webpackJsonp as a function while the newer version used it as an array.
Initially, the amcharts js loaded and declared webpackJsonp as a function. Subsequently, when nuxt tried to use it by calling the push function, an error occurred.
To address this issue, a custom jsonpFunction string was provided in the webpack config within the nuxt.config file:
extend(config, ctx) {
config.output = {
jsonpFunction: 'webpackLoad'
};
}
However, this adjustment did not resolve the error as expected. When running nuxt, localhost failed to load and only displayed a waiting message.
As a workaround, the amchart libraries were downloaded and instances of webpackJsonp were replaced with webpackLoad throughout. This successfully resolved the problem.
Edit:
The modules were downloaded using npm as specified here
Subsequently, the following code was employed:
if (process.browser) {
var am4core = require('@amcharts/amcharts4/core'),
am4maps = require('@amcharts/amcharts4/maps'),
am4geodata_world = require('@amcharts/amcharts4-geodata/worldIndiaHigh').default,
am4themes_animated = require('@amcharts/amcharts4/themes/animated').default;
}
Then, in the mounted hook:
mounted() {
am4core.useTheme(am4themes_animated);
var chart = am4core.create(this.$el, am4maps.MapChart);
}