Can't import the syncfusion charts package

[Matthieu]

Hi,

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

[Bhuvanesh Valarman]

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.  

  

Regards, 

Regards, 

Bhuvanesh V. 

[Matthieu]

Hi,

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

[Kesavan Muthusamy]

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 

 

2. Create a vue application

Start a new Vue application using below Vue CLI command. 

vue init webpack-simple quickstartcd quickstartnpm install

3. 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

 

4. 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 

 

<template> 

 <ejs-chart></ejs-chart> 

</template> 

 

<script> 

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' 

    } 

  } 

} 

</script> 

 

 

Output screenshot:  

 

Please let us if you have further assistance on this 

Regards, 

Kesavan 

[Matthieu]

Hi,

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

[Bhuvanesh Valarman]

Hi Matthieu 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Regards, 

Bhuvanesh V.