😿

Swiper.js【SyntaxError: Cannot use import statement outside a module】

2022/12/23に公開約500字

tl;dl

Swiper6系にバージョンダウンする

https://github.com/nolimits4web/swiper/issues/4871

原因?

Swiper.js7以降だとESM形式でモジュール群が作成されているため、JestではデフォルトでESM形式のモジュールをサポートしていない

一応実験的にCJSからESMに変換するように設定できるみたい。
ただし実験的機能だから、今後、破壊的変更や機能の削除等考えられるためあまり使いたくない

https://jestjs.io/ja/docs/ecmascript-modules

背景

Vue3でカルーセル機能を実装する際に、便利なプラグインを探していたところSwiper.jsを発見した。Star数、メンテナンス、ドキュメントみても充実しているため導入。

画面描画まではよかったが、Jestで転ける事態になった。

対策

Swiper6系ではCJS形式で作成されているモジュールのため、Swiper6系を使用するとエラー回避することができます。

最新バージョンが使用できず6系にロックされてしまうことが懸念点としてあげられますね。
そのため、Jestが本格的にESMをサポートしたら、それをconfigに記述して、Swiperをバージョンアップしようと思います。

Discussion

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