Swiperが突然の404エラーで画像スライダーが表示されない時

- プログラミング -
2020.07.10
swiper CDN読み込みエラー

【結論】
以下cdnjs.comからlinkタグ、scriptタグ読み込むようにしたら直りました。

https://cdnjs.com/libraries/Swiper

以下、僕が直面した事象をまとめます。

SwiperのCDN読み込みで突然の404、画像スライダーが表示されなくなる

直面した時の事象:Failed to load resource

僕が直面した事象は、

これまで正常にスライダー表示ができていた画像が、ただの画像の羅列表示に変わってしまった

というものです。

まぁJavaScriptにエラーが出てるだろうなーと思いChromeのデベロッパーツールのConsoleを見てみると、「Failed to load resource: The server responded with a status of 404 (Not Found)」のエラーが。

swiperの404エラー

chromeデベロッパーツールのConsole

エラーが出た時にheadに埋め込んでいたスクリプトは以下で、CDNunpkg.com/swiper/〜から読み込んでいました。

エラーになっていたスクリプト

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

試しにURLへ直接アクセスしてみると、やはりCannot find。

swiperで404

何が起きているんだ?と思いswiperjs.comを確認

https://swiperjs.com/get-started/

インストラクションを読むと、CDNのディレクトリ構造とファイル名が変わっている...?

<CSS>

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<JavaScript>

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

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

GitHubのchangelogを見る

このへんの変更の手がかりを得ようと、SwiperのGitHubを確認。

https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md

すると、2020年7月3日に「BREAKING CHANGE(重要な変更)」が。"ファイル名の変更あり"とのことなので、完全にこれだ

swiperのCDN URLが変わった

【解決策①】unpkg.comから読み込み直す

https://swiperjs.com/get-started/ にある通りにlinkタグ、scriptタグのURLを修正したら直りました。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

【解決策②】cdnjs.comから読み込む

「swiper cdn」でググると、cdnjs.comがトップに出てきたので、

https://cdnjs.com/libraries/Swiper

ここから読み込んでも直ります。

swiper.min.js CDN

JavaScript

swiper.min.css CDN

CSS

これまでは「unpkg.com」から読み込んでいましたが、今後もファイル名やディレクトリが変わって同じことが起きるのが嫌なので、今回はcdnjs.comから読み込むように変更して終了。

↑TOP