📝

(解決済み)【小ネタ】JavaScript の axios が急に動かなくなった

2022/10/07に公開約1,500字2件のコメント

結論

html ファイルにて記載していた axios のスクリプトを変更しました。

変更前

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

変更後

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

経緯

2022 年 10 月 7 日 (金) に、以下の GitHub のアプリケーションを使用したところ、急に動かなくなっていました。

https://github.com/nkm-m/Translate-App

エラーの内容は以下の通りです。

axios.post is not a function

前日までは使用できており、ソースコードやバックエンドの変更は一切行っていなかったので、最初は一時的なネットワークエラーだと思いました。
しかし、時間を置いてもエラーが解消されず、バックエンドの API Gateway や Lambda のログを見てもバックエンドまでリクエストが到達していないことがわかりました。

そのため、フロントエンドの問題であると考え調査してみました。

axios v1.0.0

先述のエラーで検索したところ、同日に公開された以下のブログがヒットしました。

https://zenn.dev/sa2knight/articles/axios-major-version

もしかすると以前のバージョンは使えなくなっているかと思い、上記ブログから以下の GitHub を確認しました。

https://github.com/axios/axios

しかし、もともと使用していたスクリプトも記載されており、何が原因であるかは不明でした

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

とりあえず 前者のスクリプトを試してみようと思って変更したところ動くようになりました。

さらに調査したところ、GitHub Issue に同様の問題が複数登録されていました。
どうやら後者のスクリプトではバージョン 1.1.0 が使用されるようですが、このバージョンがうまく機能しないようです。

https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js: serving axios version 1.0.0
https://unpkg.com/axios/dist/axios.min.js: serving axios version 1.1.0

一方で、前者のスクリプトはバージョン 1.0.0 で問題なく動くようです。

1.1.0 についてもバグフィックスされるとは思いますが、一時的な回避策としてはスクリプトを変更することが有効なようです。

まとめ

コードの変更はしていなくても、コードで使用するスクリプトのバージョンは自動的に上がっていくので、「何もしていないのに動かなくなった」という場合には、GitHub Issue などでバージョンのバグを確認することが重要だということをあらためて認識しました。

小ネタでしたが参考になれば幸いです。

Discussion

ちなみに2022年10月8日現在は修正済みで
どちらもバージョン1.1.2です。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
console.log(axios.VERSION) // 1.1.2
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
console.log(axios.VERSION) // 1.1.2
</script>

追記ありがとうございます!
GitHub Issue でもクローズになっていましたので、修正済みですね。
もとのスクリプトでの実際の動作確認も問題ありませんでした。

ログインするとコメントできます