The function 'ChartModule' cannot be called, as function calls are not supported

I am encountering a similar problem as discussed in Angular 2 - AOT - Calling function 'ChartModule', function calls not supported

ERROR: Error encountered while resolving symbol values statically. Trying to call function 'ChartModule'. Function calls are not allowed. It is recommended to replace the function or lambda with a reference to an exported function.

In my scenario, I have 4 require statements and I am unable to make it work using the same approach mentioned in the provided answer for aforementioned question.

This is what I attempted:

export function highchartsFactory() {
  const hc = require('highcharts');
  const hm = require('highcharts/highcharts-more');
  const h3d = require('highcharts/highcharts-3d');
  const sg = require('highcharts/modules/solid-gauge');

  hm(hc);
  h3d(hm);
  sg(h3d);

  return hc;
}

Could you guide me on what might be wrong with my approach and suggest a solution to resolve this issue?

Thank you.

javascriptangularhighchartsangular2-highcharts

Answer №1

After some tweaking, I managed to get it up and running by implementing the following adjustments in order to pass highcharts to different modules.

export function customHighchartsSetup() {
  const mainLibrary = require('highcharts');
  const moreFeatures = require('highcharts/highcharts-more');
  const threeDCharts = require('highcharts/highcharts-3d');
  const solidGaugeModule = require('highcharts/modules/solid-gauge');
  
  moreFeatures(mainLibrary);
  threeDCharts(mainLibrary);
  solidGaugeModule(mainLibrary);

  return mainLibrary;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my AngularJS controller to fail in my jasmine test?

I encountered the following error message: "Controller: MainCtrl should retrieve a list of users and assign to scope.users FAILED TypeError: 'undefined' is not a function (evaluating 'Users.findAll()') at /Users/John/NetBea ...

javascriptangularjsjasmine

Updating Array Values in AngularJS based on Input Text Box Modifications

In my application, there is a text box that looks like this - <input type="text" class="form-control" id="inputID" name="ItemId" ng-model="inputItemId" ng-required="true" ng-blur="addValueToArray(inputItemId)"/> The user has the ability to add or r ...

javascriptangularjsarrays

Maintain only specific elements in jQuery by filtering out the rest

Here is a scenario with a page layout to consider: <div id="page-container" class=""> <div id="scroller"> <!-- This page should be removed --> <div id="page_1" class="pagina"></div> <!-- These pages should be kept --&g ...

javascriptjquery

Getting Started with Angular: Loading Data into a List from a Service

As I am relatively new to Angular, I have a list that needs to be displayed on the screen. Initially, I was able to show the list with hard-coded data, but now I need to fetch the data from my service that calls an API. The data retrieval part is already i ...

angular

Changing text color based on positive or negative value in JavaScript(React)

Greetings everyone! I'm currently working on a specific feature that requires the color of a value to change dynamically. If the value is above 0, it should be displayed in green; if below 0, in red; and if equal to 0, in orange or yellow. To achieve ...

javascriptreactjsalgorithm

Refine keys dynamically according to the given input

I'm facing a challenge with an array wherein I need to filter out keys based on an input string. The only constant key is OLD_VAL, while the others are dynamic. Even though I attempted using a variable, it doesn't retrieve that specific key. let ...

javascriptnode.js

The building of the module was unsuccessful due to a failure in the babel-loader located in the webpack module of Nuxt

While working on my Nuxt.js project, I encountered a warning error that I couldn't resolve even after searching for a solution. If anyone can assist me with this issue, it would be greatly appreciated. The error message is as follows: ERROR in ./.nu ...

javascriptvue.jswebpackbabeljsnuxt.js

Exploring Angular.js: Finding the correct path in a JSON array

Within my Angular application, I have a $scope variable defined as follows. $scope.roleList2 = [ { "roleName" : "User", "roleId" : "role1", "children" : [ { "roleName" : "subUser1", "roleId" : "role11", "collapsed" : true, "children" : [ ...

javascriptangularjsjson

What are your thoughts on Uptrends vs Dynatrace for Website Monitoring?

I'm seeking recommendations for improving monitoring on a retail website. Any advice would be appreciated. Thank you in advance. ...

javascriptperformancewebsite-monitoring

Whenever I click on a button, I want to modify the background color of my react-modal

Having an array of images with clickable overlays and a modal that changes the background color based on the overlay name when clicked is the goal. However, passing this value as a prop proves challenging since the images are generated through a function a ...

javascriptreactjsaxiosstyled-componentsreact-modal

ReactJS encountered an error of type ERR_INVALID_ARG_TYPE

Hello there! I recently purchased a template from ThemeForest and everything was working perfectly with the previous version. However, upon updating to the new version, I encountered an error that looks like this: > TypeError [ERR_INVALID_ARG_TYPE]: Th ...

javascriptreactjs

An error was thrown due to an unexpected end of JSON input while fetching from localhost

After running the code snippet provided, I encountered an Uncaught SyntaxError: Unexpected end of JSON input. As a beginner in coding, any guidance or assistance would be greatly appreciated. Thank you. fetch('http://localhost:3000/add-user', { ...

javascriptreactjsreact-nativeexpress

Changing the contents of a global array in JavaScript

$(document).ready(function(){ var currArray=null; var group=null; var admin=null; var equipment=null; var student=null; console.log("after get array info"); for(var i=0; i<equipment.length; i++) { console.log("equipment at index after get array info ...

javascriptjqueryarrays

Changing states in next.js is not accomplished by using setState

Struggling to update the page number using setCurrentPage(page) - clicking the button doesn't trigger any state change. Tried various methods without success. Manually modified the number in useState(1) and confirmed that the page did switch. import ...

javascriptreactjsnext.js

The values are not being displayed in the local storage checkbox

I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...

javascripthtmlcss

Executing the Npm audit fix --force command will automatically implement its own suggestions

Despite coming across countless similar questions, none of them have been helpful in addressing my issue. I am working on resolving critical vulnerabilities. I have executed npm update, npm audit fix, and npm audit fix --force multiple times, but the prob ...

javascriptnpm

What is the best way to manage a vuex dispatch response?

Despite feeling like the answer is right in front of me, I'm waving the white flag and seeking suggestions. The challenge lies in my login form that submits to an AWS API and reacts to the result. The trouble starts when the handleSubmit method is tr ...

javascriptvue.jsvuexaws-amplify

Ways to retrieve every item in an array

I'm experiencing difficulty accessing the array of each object. Please review the response structure below. { "status": "1", "status_text": "Success", "current_page": 1, "next_page": "0", "previous_page": "0", "to ...

arraysjsonangularionic2

What is the alternative to $templateCache in Angular2 and how can CachedResourceLoader be utilized in its place?

While I have come across 2 similar questions on Stack Overflow and here, none of them seem to provide a solution. After delving into the Angular repository, I stumbled upon this issue where they inquire about an alternative for templateCache in Angular 2, ...

javascriptangularjsangular-templatecache

Chrome and Firefox provide excellent compatibility for running JavaScript, whereas Safari may encounter some issues. Opera's performance with JavaScript can be quirky

Disclaimer: I'm new to web design and development. I have encountered an issue with posting information from a form built on CodeIgniter using jQuery. The form posts successfully in Chrome and Firefox, with the current page automatically reloading. H ...

javascriptjqueryformscodeignitercross-browser