はじめに
おうちk8sでアプリを動かそうとした時に、ブラウザが上手く表示できず、その時にブラウザの検証のコンソールに表示された「node_modules/.vite/deps/chunk-XXXXXXX.js?v=aa8ceda7 net::ERR_ABORTED 404 (Not Found)」というエラー。
そのエラーとの格闘の記録です。
エラー対応の経緯
エラーは以下のようなものです。
@amcharts_amcharts4_core.js:196 GET http://change-view.cospa-tank.com/node_modules/.vite/deps/chunk-XXXXXXX.js?v=aa8ceda7 net::ERR_ABORTED 404 (Not Found)@amcharts_amcharts4_core.js:196 GET http://change-view.cospa-tank.com/node_modules/.vite/deps/chunk-XXXXXXX.js?v=aa8ceda7 net::ERR_ABORTED 404 (Not Found)
以下の記事を参考に、
vite.config.jsに以下を追記。（ハイライトのところ）
・・・略・・・
export default defineConfig({
optimizeDeps: {
exclude: ['@amcharts/amcharts4']
},
・・・略・・・これで一旦、「GET http://change-view.cospa-tank.com/node_modules/.vite/deps/chunk-XXXXXXX.js?v=aa8ceda7 net::ERR_ABORTED 404 (Not Found)」のエラーは消えました。
The requested module ‘/node_modules/polylabel/polylabel.js?v=b428e741’ does not provide an export named ‘default’
そしたら次は以下のエラーが出てきました。
Uncaught SyntaxError: The requested module '/node_modules/polylabel/polylabel.js?v=b428e741' does not provide an export named 'default' (at MapPolygon.js?v=68b8d52c:16:8)以下のようなエラーです。（見やすいバージョン）
Uncaught SyntaxError: The requested module '/node_modules/polylabel/polylabel.js?v=b428e741' does not provide an export named 'default' (at MapPolygon.js?v=68b8d52c:16:8)
以下の場所で起きており、
./node_modules/@amcharts/amcharts4/.internal/charts/map/MapPolygon.js:16:import $polylabel from "polylabel";@amcharts/amcharts4でのエラーのようです。
しかもamchartsの中にあるから修正しようにもできないです。
@amcharts/amcharts4から@amcharts/amcharts5へ更新しました。
amcharts4の更新頻度は低く、今はamcharts5が更新されているのもあって変更することにしました。
書き方が少し異なるので、ドキュメントを読みながらamcharts5に変えました。
その結果、エラーは消えませんでした、、、。
時間をかけたのに、、、。
polylabel
polylabelのバージョンを確認すると、以下のように、1.1.0なので、上げることにしました。
$ npm list polylabel
frontend@0.1.0 /home/appare99/change_view/docker_compose/vue/frontend
├─┬ @amcharts/amcharts4@4.10.40
│ └── polylabel@1.1.0
└─┬ @amcharts/amcharts5@5.13.3
└── polylabel@1.1.0 dedupedバージョン最新は2.0.1でした。
以下のようにアップデートし、2.0.1があることを確認しました。
$ npm list polylabel
frontend@0.1.0 /home/appare99/change_view/docker_compose/vue/frontend
├─┬ @amcharts/amcharts5@5.13.3
│ └── polylabel@1.1.0
└── polylabel@2.0.1しかしまだブラウザ側のコンソールでは以下のエラーが残っていました。
Uncaught SyntaxError: The requested module '/node_modules/@amcharts/amcharts5/node_modules/polylabel/polylabel.js?v=f3884cb6' does not provide an export named 'default' (at MapPolygon.js?v=85a2082a:3:8)エラーは以下のようなものです。上記でも見た同じものです。
Uncaught SyntaxError: The requested module '/node_modules/@amcharts/amcharts5/node_modules/polylabel/polylabel.js?v=f3884cb6' does not provide an export named 'default' (at MapPolygon.js?v=85a2082a:3:8)
そこで、package.jsonのoverridesを追記しました。
"overrides": {
"polylabel": "2.0.1"
}これで、polylabelが2.0.1に設定されていることが確認されました。
$ npm list polylabel
frontend@0.1.0 /home/appare99/change_view/docker_compose/vue/frontend
└─┬ @amcharts/amcharts5@5.13.3
└── polylabel@2.0.1 overriddenそして、エラーが解消されたことを確認しました。
最後に
まだ、フロント側のエラーのエラーハンドリングに慣れていなくて、時間がかかります。
早く慣れたいです。
