Nuxt.jsでLIFFのliff.initが機能しないときの対処法

Nuxt.jsでLiffアプリ開発中に、LINE上のLiffブラウザでliff.init()の応答がないという問題が発生していました。

ただChromeやSafariなどの外部のWebブラウザからLiffアプリにアクセスした場合は、問題なくliff.init()が実行されるため原因特定に時間がかかっていました。

結論：LIFF SDKのnpm管理をやめてCDNパスを指定する形にしたら解決しました。

nuxt.config.jsに以下を追記。

export default {
  
  head: {
    script: [
      { src: 'https://static.line-scdn.net/liff/edge/2/sdk.js' }
    ]
  }
　
}

Angularでの開発でも同様の問題が発生してるみたいです。

根本的な原因は調べきれていませんが、単純にNuxt.jsがLIFF SDKのnpmパッケージに未対応だったのかなと思っています。

LIFF SDKのCDNパス指定やバージョン情報など詳細は公式サイトをご確認ください。

まとめ

数日間Liffの記事を漁りまくってなかなか解決しなかったので、この記事が誰かの助けとなれば幸いです。