More than 1 year has passed since last update.

【Nuxt】vue-chartjsの読み込みに失敗する！

Posted at 2022-02-01

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

こんなメッセージが出てくる。なんでやねん！グラフ出したいだけなんですけど？！

https://reffect.co.jp/vue/nuxt-js-vue-chartjs-easy-to-use
こことかを参考にやってんだけどなぁ・・・

なんでこう記事では簡単に導入できてんのに、自分のときはエラーが出るんだ～！！って毎回思うｗ

####package.jsonのchart.jsのバージョンを2.9.4に書き換える

package.json

"dependencies" : {
    "chart.js": "^2.9.4", //このバージョンに書き換える
...
    "vue-chartjs": "^3.4.0",
...
}

####.nuxtとnode_modulesとpackage-lock.jsonを削除

一旦上記のフォルダを削除

####node install を実行

$ node install

実行後にnode_modulesとpackege-lock.jsonが作成される

####yarn devを実行

$ yarn dev

このタイミングで.nuxtが作成される。

上記の手順で何故かうまくいきました。
どこが要だったのかよくわかりませんが、chart.jsのバージョンの変更は間違いなく必須だと思います。