Fusion chart causing issues in Vue lazy loaded route

Everything was running smoothly in my existing Vue project until we decided to optimize the bundle size by implementing lazy loading routes.

For example: 

const ContentAuditPage = () => import("./components/content-audit/ContentAuditPage");

However, after this optimization, I encountered an error with Fusion Chart. The chart is supposed to display data in a sidebar when the endpoint data is ready, but instead, I received this error:

 https://localhost:3000/v2/108967/content/audit/fusioncharts.charts.js net::ERR_ABORTED 404 (Not Found)

This was followed by:

fusioncharts.js:13 Uncaught (in promise) Error: ChunkLoadError
    at a.e (fusioncharts.js:13:2209)
    at d (fusioncharts.js:13:57828)
    at Function.<anonymous> (fusioncharts.js:13:59295)
    at i (fusioncharts.js:13:177902)
    at o (fusioncharts.js:13:178077)
    at h (fusioncharts.js:13:179357)
    at t.chartType (fusioncharts.js:13:84493)
    at new e (fusioncharts.js:13:76516)
    at new f (fusioncharts.js:13:61265)
    at VueComponent.renderChart (index.js:17918:1)
    at fusioncharts.js:13:72261

In my Vue project, I imported Fusion Charts like this:

import FusionCharts from 'fusioncharts';
import Exports from 'fusioncharts/fusioncharts.excelexport';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Exports, TimeSeries);
FusionCharts.options['license']({
    key: process.env.FUSIONCHARTS_KEY,
    creditLabel: false,
});
javascriptvue.jsvuejs2fusioncharts

Answer №1

To address the issue, I implemented the solution below:

import Charts from 'fusioncharts/fusioncharts.charts'

Then, I integrated it into the specified location:

const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Exports, TimeSeries, Charts);

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

Mandatory Input Field + Button Click Request

I am currently working on making my input field mandatory. <form name="myForm" method="post"> <input type="text" id="username" name="username" required> <center><button id=" ...

javascriptjquery

Spinning objects in three.js using tween.js to move around the global axis

Currently, I am working on tween-rotating a 3D cube. Thanks to this helpful post (How to rotate a object on axis world three.js?), I have successfully achieved rotation without any issues. Now, my goal is to transfer the rotation achieved through setFromRo ...

javascriptrotationthree.jstween

The ScriptManager.RegisterStartupScript function does not execute a second time when used inside an UpdatePanel

My aspx page <span> <asp:UpdatePanel ID="upPlayBtn" runat="server" > <ContentTemplate> <asp:Button runat="server" id="btn" Text="Play" OnClick="btnPlay" /> </ContentTemplate> </asp:UpdatePanel> </span> ...

c#javascriptasp.netajaxupdatepanel

What is the best way to navigate to a specific location on a web page?

After clicking the "Add comment" link, a comment form popped up using Ajax. I now need assistance with scrolling to it, can you please help me out? ...

javascriptjqueryajaxscrollautoscroll

Guide to automatically redirecting back to the login page after successfully creating a new account using Redux Saga

Having just started working with redux-saga, I'm encountering an issue where I can't seem to be redirected back to the login page after successfully creating an account. Even though I've implemented the necessary code for redirection, I keep ...

javascriptreactjshttp-redirectreduxredux-saga

Transformation of an Array of Objects into an Array of Arrays

Is there a way to dynamically convert an Array of objects into an Array of Arrays? For example: arrayTest = arrayTest[10 objects inside this array] Each object in the array has multiple properties that are added dynamically, so the property names are un ...

javascriptarraysobject

Different browsers have varying ways of handling transition end callbacks with AddEventListener()

Each browser has its own transition end callback. Therefore, I find myself needing to use addEventListener() for each one. addEventListener('transitionend', function() { // code here }); addEventListener('webkitTransitionEnd', funct ...

javascriptjqueryanimation

Implement a jQuery slider that pauses on hovering

Currently, I am grappling with the clearInterval function in a small jQuery project. To better illustrate the issue, I have created a jsFiddle example: http://jsfiddle.net/eWTSu/ While the rotation works smoothly, I encountered an obstacle when hovering ...

javascriptjqueryanimationhover

How can I implement SSO and Auth for multiple sub-domains using PHP?

Is it possible to implement SSO using PHP between two different sub-domains (e.g. parappawithfries.com and *.parappawithfries.com)? My current configuration is causing issues as I use Cloudflare to direct my subs to a different 000webhost website. While I ...

javascriptphpjqueryajax

Store the selected checkbox values in an array when submitting in Ionic

One issue I am facing is that the checked checkboxes are returning true instead of the value of input (type="checkbox"). Array displaying responded checked or unchecked items I am unable to store this data in an array as needed. Additionally, I cannot sp ...

javascriptangulartypescriptionic-framework

My goal is to display the information retrieved from my AJAX response within my jQuery data table

I am attempting to display my AJAX response in a jQuery data table. The structure of my table is as follows: <div style="margin: 20px;"> <table id="example" class="display" style="width:100%"> ...

javascripthtmljqueryajaxdatatable

What is the best way to ensure data encapsulation (safeguarding global variables) in an

I'm currently working on an animation loop using three.js, and I've noticed that most online examples (like mrdoob, stemkoski) rely on unprotected globals at the beginning of the script. I attempted to encapsulate these in the init() function and ...

javascriptanimationthree.jsglobal-variablesclosures

Trigger the Material UI DatePicker to open upon clicking the input field

I have a component that is not receiving the onClick event. I understand that I need to pass a prop with open as a boolean value, but I'm struggling to find a way to trigger it when clicking on MuiDatePicker. Here is an image to show where I want to ...

javascripttypescriptmaterial-ui

Ensure to update the canvas prior to the function finishing

Is there a way to update the canvas element while inside a JavaScript function without waiting for the function to return? It can be frustrating when you want to keep the function running but also need to update the canvas element in real time. ...

javascripthtml5-canvas

Issue with Masonry layout not adjusting to change in window size

Something seems to be fixed on displaying four rows, no matter the size of the window. Previously, it would adjust to three rows or fewer as the browser was resized. I recently played around with columnWidth, but reverting it back to 250 doesn't seem ...

javascriptjquerycssjquery-masonry

Determining the Last Modified Date for a Sitemap using Javascript

I am trying to replicate the date format shown within <lastmod></lastmod> tags in a sitemap.xml file. How can I do this? The desired output is as follows: <lastmod>2016-01-21EEST18:01:18+03:00</lastmod> It appears that 'EEST ...

javascriptphphtmlxmlsitemap

Exploring the dynamic JSON object from D3 in a Rails view

Currently, I am in the process of learning D3 and my initial attempt involves showcasing a graph where I manually hard-code the json data. To demonstrate this, I have put together a JSFiddle which you can view here: http://jsfiddle.net/Nu95q/1/ The JSFid ...

javascriptruby-on-railsjsond3.jscoffeescript

Clicking on a link with anchor "#" does not automatically scroll to the top of the page

Below is the link I am referring to: <a href='#'>click to update the page</a> This link triggers a JavaScript code that updates the contents of a div without needing to refresh the entire page by posting back to the server. The issu ...

javascripthtml

Issue with require in Three.js

I am delving into the world of Three.js and Require.js for the first time. My objective is to load an Obj and Mtl file using the OBJMTLoader. However, I have encountered timeout errors in the console with my current setup: require({ baseUrl: 'js& ...

javascriptthree.jsrequirejs

How can you leverage both sockets and express middleware at the same time?

Is there a way to access the socket of a request within an express middleware function? For example: import express from 'express'; import io from 'socket.io'; const app = express(); // Integrate app and io somehow ... // When a cl ...

javascriptnode.jssocketsexpresssocket.io