We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can't import the syncfusion charts package

I'm trying to import a chart component inside one of my projects and I always get this error:
Module not found: Error: Can't resolve '@syncfuion/ej2-vue-charts' in '/mnt/Data/Dev/Web-Development/testcharts/src'

I tried to start from scratch in a tempory project while following the documentation but I got the same error. I'm using webpack so I guess this is an issue inside of the configuration files but I don't know how to fix it (still new at this even if I have some experiences in other languages).

Thanks for the help

5 Replies

BV Bhuvanesh Valarman Syncfusion Team September 9, 2019 12:15 PM UTC

Hi Matthieu, 

Greetings from Syncfusion.  
We have analyzed your query. From your provided information we suspect that “@syncfusion/ej2-vue-charts” package not installed properly in your project. Try to install Vue chart packages using this command “npm install @syncfusion/ej2-vue-charts --save” also refer this Getting started with chart  for more details.  

Kindly revert us, if you have any concerns.  

Bhuvanesh V. 

MA Matthieu September 9, 2019 04:10 PM UTC

Thanks for your quick response. I just tried what you told me while following exactly the documentation steps, and still not working. I guess it's because I don't know how and where to put this: "Syncfusion ej2-vue-charts packages needs to be mapped in systemjs.config.js configuration file".
As I don't have this file in my webpack package. 
Please find attached my package.json file and webpack file.

Thanks for your help

Edit: I started again from a new empty project from scratch, and it seems to have worked. Might have been a mistypo when I imported the chart

Attachment: charts_import_fe05e4a.zip

KM Kesavan Muthusamy Syncfusion Team September 10, 2019 11:58 AM UTC

Hi Matthieu, 

Sorry for inconvenience caused.  

We have replaced your package.json and webpack files in our vue-cli project. It is working fine in our end. Please ignore the systemjs configurations in the documentation. We have prepared  a sample with the package.json and webpack.config.js which you had shared.  

Sample link: sample 

Please follow the steps to render Syncfusion Vue charts,  

  1. Install vue cli
You can use Vue CLI to setup your vue applications. To install Vue CLI use the following commands. 
npm install -g @vue/cli 
npm install -g @vue/cli-init 
  1. Create a vue application
Start a new Vue application using below Vue CLI command. 
vue init webpack-simple quickstartcd quickstartnpm install
  1. Adding Syncfusion Chart package
All the available Essential JS 2 packages are published in npmjs.com registry. 
To install chart component, use the following command 
npm install @syncfusion/ej2-vue-charts --save
  1. Registering Chart Component
You can register the chart component in your application by using the Vue.use(). 
Refer to the code example given below. 
import { ChartPlugin } from '@syncfuion/ej2-vue-charts';Vue.use(ChartPlugin);

5.       Adding Chart Component

·                    Add the Vue Chart by using <ejs-chart> selector in <template> section of the App.vue file. 
Code snippet: 
App.vue file 
import Vue from 'vue'; 
import { ChartComponent, ChartPlugin } from '@syncfusion/ej2-vue-charts'; 
Vue.component(ChartPlugin.name, ChartComponent); 
export default { 
  name: 'app', 
  data () { 
    return { 
      msg: 'Chart' 
Output screenshot:  

Please let us if you have further assistance on this 


MA Matthieu September 10, 2019 12:04 PM UTC

Thanks for your help. It is now working, after following all your steps that you descrbibed on the post before.
I compared this project with mine which wasn't working, and it seems that the issue which was causing it was a simple typo error in the module name.
Thanks a lot for your help

BV Bhuvanesh Valarman Syncfusion Team September 11, 2019 11:03 AM UTC

Hi Matthieu 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Bhuvanesh V. 

Live Chat Icon For mobile
Up arrow icon