vue-chartjs can't import data from vue

user_7955433 0
Viewed 199

I get this error after compiling my Vue 2 project:

Failed to compile.

./node_modules/vue-chartjs/dist/index.js 85:11-26
"export 'defineComponent' was not found in 'vue'

The line in the file above that is causing this behavior is:

import { defineComponent, shallowRef, ref, watch, onMounted, onBeforeUnmount, toRaw, h, isProxy } from 'vue';

All of these imports cause the same error. This happens after I upgrade vue-chartjs from version 3.5.1 to version 4.1.1 (before it works perfectly). I'm looking for ideas on what might be causing this.

The versions of used dependencies are:

- "chart.js": "^3.8.0"
- "vue": "^2.6.14"
- "vue-chartjs": "^4.1.1"

Unfortunately, I cannot provide a snippet. This happens only on a project which is in use at work. If I try this on a clean project, it compiles perfectly. The Internet is almost void in regard to information on Vue, so I'm just looking for any idea.

Anything you can think of that could cause this, please share. Even the dumbest idea may help, I've been scouring the Internet for days and I can't find anything. This is getting super frustrating, all I wanted to do was upgrade chart.js and it's taking me days, lol.

vue-chartjs chart.js vuejs2 vue.js javascript
2 Answers

I guess you are trying to import the lib like so:

import { Bar } from 'vue-chartjs'

This won't work for you since you are using Vue2. To use the Vue wrapper with Vue2 you will need to import from 'vue-chartjs/legacy'. In here they have support for Vue V2 and then your application should compile just fine.

Correct import for you:

import { Bar } from 'vue-chartjs/legacy'

Comming from their readme

user_86829830
user_88165850
Related