Can't import the syncfusion charts package

Matthieu

Asked On September 8, 2019 08:13 PM UTC

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

Reply | Reply with quote

Bhuvanesh Valarman [Syncfusion]

Replied On 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.

Regards,

Bhuvanesh V.

Reply | Reply with quote

Matthieu

Replied On September 9, 2019 04:10 PM UTC

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

Reply | Reply with quote

Kesavan Muthusamy [Syncfusion]

Replied On 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,

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

Create a vue application

Start a new Vue application using below Vue CLI command.

vue init webpack-simple quickstartcd quickstartnpm install

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

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

<ejs-chart></ejs-chart>

</template>

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

Reply | Reply with quote

Matthieu

Replied On September 10, 2019 12:04 PM UTC

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

Reply | Reply with quote

Bhuvanesh Valarman [Syncfusion]

Replied On September 11, 2019 11:03 AM UTC

Hi Matthieu

Thanks for your update.

Kindly revert us, if you need further assistance.

Regards,

Bhuvanesh V.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147378	Sep 8,2019 08:13 PM UTC	Sep 11,2019 11:03 AM UTC	Vue	5

Thread ID:

Created:

Updated:

Platform:

Replies:

5. Adding Chart Component

Please sign in to access our forum

CONTACT US