NuxtjsにIntersection Observerのpolyfillをimportしたらエラーだった件

Intersection Observerの対応状況(2020年10月末現在の状況)

今回は古いブラウザ（特にIE）のためにpolyfillを導入することになりました。

公式のpolyfillを導入する

こちらの動式polyfillを導入しました

導入手順from公式サイト

実際の導入手順はこちらを参考しました

• ステップ1
  polyfillをインストール

npm install intersection-observer

• ステップ2
  polyfillをimportする(公式ではrequireですがnuxtjsではimportを使います）
  多分こんな感じでimportしたら良いのかなとimportしてみました。

import { IntersectionObserver } from 'intersection-observer';

そして自分で書いた関数でnewで呼び出します

const observer = new IntersectionObserver(callback, options);

結果、エラーがでます!

このエラーメッセージでググってみても的外れな記事しか見つかりませんでした Orz...

公式のソースコードを確認します

公式のソースコード

確認してみたら特にexportを書いておらず、もしかしたらimport周りの書き方が間違ったのかなぁと思い始め..

importの書き方はこう書くと解決

import 'intersection-observer';

import xxx from ではなくて、 importをだけでいいでした。

普段はほぼimport fromしか使ってないからimportだけ書くのはなれませんね。
importはそのままモジュールのコードを展開するだけらしいから、特殊なケース以外そう書かないですね。

ちなみに公式APIでもちゃんとこういう使い方を書いてますね。

ただ公式の説明を見てもよく理解できませんでした。自分の理解力は足りなかったか翻訳が良くなかったか...

最後に

エラーが出てエラーメッセージをググってみても解決策を見つからない場合はやはり公式ソースコードを追うことが大事ですね。少しでも解決の糸を掴めるはずなので皆さんも是非試してみてください。

最後まで読んで頂きありがとうございました。