Nuxtjsでvue-intersectを使う時あったエラーについて

Vue-intersectをNuxtjsに導入する

仕事でIntersection Observer APIを使うことになって色々とリサーチしたらちょうどいい感じなコンポーネントを見つけました。

公式ドキュメントの通りにやってみた

とりあえず公式ドキュメント通りにinstallして、vueの中にimportして使う。
よし！いい感じに動けるぞ！
でも急にエラーが出てきました....

<template>
  <intersect @enter="msg = 'Intersected'" @leave="msg = 'Not intersected'">
    <div>{{ msg }}</div>
  </intersect>
</template>

<script>
  import Intersect from 'vue-intersect'

  export default {
    components: { Intersect },
    data () {
      return {
        msg: 'I will change'
      }
    }
  }
</script>

エラーを再現する

エラーが起きた状況を説明します。
はじめはブラウザでIntersectを実装するページを開いたまま開発しました。
そのままテストしてIntersectコンポーネントがちゃんと機能してるの確認できました。
一回他のページに遷移してまた戻っても普通に機能しました。

そしてさらに開発をして、ページをリロードしたら下記のエラーが起きます。
"Cannot use import statement outside a module”

あれれ？さっきまで普通だったのにページをリロードしたらエラーが出ます。
試しに他のページを見ましたがエラーが出ません、そして戻ったらエラーが出ません...
でもリロードしたらエラーが出ます...詰んだ...

解決方法

結論からいうと公式のissueを漁ってみたらこれを見つけました。
エラーメッセージは僕のと違いますが、エラーのstackを見るとほぼ同じなので下記の設定をnuxt.config.jsに追加したら無事に解決できます。

build: {
    transpile: ['vue-intersect'],
  },

最後に

結局本当の原因はわからずじまいでしたが、一応ネットで同じエラーメッセージをぐぐってみたらもしかしたらES6で書いたモジュールがこういうことが起きるじゃないかと。

もし僕と同じエラーが出て、この記事で解決できたら幸いです。