Recommended Posts

Hello, I wonder if anyone can help. 

Apologies if this is in the wrong section but there's no Vue.js section.

I have a vue.js 2 project that uses Vue-router to switch views, a home view (no charts), a treemap view (FusionCharts treemap) and a column chart view (column3D). Each view is an individual vue.js component.
When running the application, the home page displays fine and when changing the route, the very first chart displays perfectly. I can go back to the home page then to that same chart - all good.  

The problem is when going from the Treemap view to the Column chart view, then I get an error "Uncaught SyntaxError: expected expression, got '<'" .  I suspect it is related to this warning - The script from “http://localhost:8080/fusioncharts.charts.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

Same happens when I view the Column chart first, then move to the Treemap view, the warning in that case is - The script from “http://localhost:8080/fusioncharts.treemap.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

The code that fails is this:

Quote
var chart = new FusionCharts({
type: 'stackedcolumn3d',
renderAt: 'incident-view',
width: '100%',
height: '700',
dataFormat: 'json',
dataSource
})

in either the Treemap view or the Column chart view - code is similar but 'type', 'render at' and 'dataSource' parameters are different.

What is causing the MIME type error, and how do I get around this issue?

Thanks
Ron

Share this post


Link to post
Share on other sites

@Ayan Bhadury Thanks for your reply, I have indeed put the imports in the individual components. These are the imports in the component that builds the Treemap:

import Vue from 'vue'
import VueFusionCharts from 'vue-fusioncharts'
import FusionCharts from 'fusioncharts'
import PowerCharts from 'fusioncharts/fusioncharts.powercharts'
import Treemap from 'fusioncharts/fusioncharts.treemap'
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

And the imports for the Column3D charts:

import Vue from 'vue'
import VueFusionCharts from 'vue-fusioncharts'
import FusionCharts from 'fusioncharts'
import Column3D from 'fusioncharts/fusioncharts.charts'
import PowerCharts from 'fusioncharts/fusioncharts.powercharts'
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

It's getting late now but I'll do as you suggest and apply these at global level.

Thanks
Ron

Share this post


Link to post
Share on other sites

Thanks very much Ayan, I have got this working now!

I've gone the component way and changed the import for vue-fusioncharts to vue-fusioncharts/component. 
Added the constant then used the Vue.component to register.  Which I had set to Vue.use in both components before - I think now this is where the contention was.

Happy days!

Thanks
Ron

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now