vue-chartjs can't import data from vue-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

This error is usually coming from the fact that you're using a Vue3 specific version. As explained here: "export 'default' (imported as 'Vue') was not found in 'vue'

Checking the releases page of vue-chartjs, we can see that v4.0.0 had a breaking change of migrating to Vue3: https://github.com/apertureless/vue-chartjs/releases/tag/v4.0.0

Hence why the v4 is causing such problem. Stay at v3.5.1 (22 august 2020) or below if you're stuck with a Vue2 usage.