😿
Swiper.js【SyntaxError: Cannot use import statement outside a module】
tl;dl
Swiper6系にバージョンダウンする
原因?
Swiper.js7以降だとESM形式でモジュール群が作成されているため、JestではデフォルトでESM形式のモジュールをサポートしていない
一応実験的にCJSからESMに変換するように設定できるみたい。
ただし実験的機能だから、今後、破壊的変更や機能の削除等考えられるためあまり使いたくない
背景
Vue3でカルーセル機能を実装する際に、便利なプラグインを探していたところSwiper.jsを発見した。Star数、メンテナンス、ドキュメントみても充実しているため導入。
画面描画まではよかったが、Jestで転ける事態になった。
対策
Swiper6系ではCJS形式で作成されているモジュールのため、Swiper6系を使用するとエラー回避することができます。
最新バージョンが使用できず6系にロックされてしまうことが懸念点としてあげられますね。
そのため、Jestが本格的にESMをサポートしたら、それをconfigに記述して、Swiperをバージョンアップしようと思います。
Discussion