search

apertureless / vue-chartjs

📊 Vue.js wrapper for Chart.js
https://vue-chartjs.org
MIT License
5.54k stars 834 forks source link

[Bug]: Default installation and example from official docs doesn't work with nuxt. #1008

Open edsonfeimberg opened 1 year ago

edsonfeimberg commented 1 year ago

Would you like to work on a fix?

Current and expected behavior

When trying to implement vue-chartjs in a nuxt 2 project, following the official documentation results in the following error after running 'npm run dev':

ERROR in ./node_modules/vue-chartjs/dist/index.js friendly-errors 12:42:19 Module parse failed: Unexpected token (198:37) friendly-errors 12:42:19 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Reproduction

https://github.com/edsonfeimberg/nuxt-vuechart

chart.js version

5.2.0

vue-chartjs version

4.2.1

Possible solution

No response

apertureless commented 1 year ago

Related to https://github.com/apertureless/vue-chartjs/issues/1002 ?

edsonfeimberg commented 1 year ago

Related to #1002 ?

Yes. Issue can be fixed using the suggestion from @ChurikiTenna of using babel-loader to transpile both vue-chartjs and chart.js.

In nuxt 2 this can be easily done by adding to nuxt.config:

build: {
    transpile: ['chart.js', 'vue-chartjs']
  }

Anyway, searching around we can see dozens of people struggling a lot to make vue-chartjs work with Nuxt. Literally all the resources currently available are related to older versions of vue-chartjs and leads to a lot of confusion.

Considering Nuxt relevance (specially nuxt 2) inside Vue ecosystem, i think the docs could be a bit more helpfull in this scenario. I am willing to help.

apertureless commented 1 year ago

Well, but the issue is basically due to older webpack version. I think nuxt 3 was released last year? And is using up2date build tools (webpack 5, vite). So I think the issue will resolve over time, when more people start using nuxt3.

geofany commented 1 year ago

Well, but the issue is basically due to older webpack version. I think nuxt 3 was released last year? And is using up2date build tools (webpack 5, vite). So I think the issue will resolve over time, when more people start using nuxt3.

Or maybe we can specify which version supports Nuxt 2 / Nuxt 3, with different documentation versions.

AhmedElwerdany commented 1 year ago

I ended up downgrading "vue-chartjs": "^4.0.0" "chart.js": "^3.7.0"