[Nuxt.js] SSRモード時にScrollTrigger.jsがエラーになる

mayatasomayataso

gsapのScrollTrigerをNuxt.jsで使おうとしたら、エラーが出た。内容は、

SyntaxError
Unexpected token export

エラーメッセージの詳細を見てもなんのことやらだったが、どうやらSSRモードにしていることが原因で、サーバサイドだとwindowとか、クライアントサイドで使える機能の一部が使えないためjs内の一部処理でエラーになっているようだった。

解決策としては、

  • importを使わずrequireで読み込む
  • process.clientのときのみ、該当するライブラリを読み込む条件分岐を加える

で解決できた。

import { gsap } from "gsap";
// import { ScrollTrigger } from "gsap/ScrollTrigger";
const ScrollTrigger = process.browser ? require("gsap/ScrollTrigger") : undefined;

export default {
  name: "product-page",
  mounted() {
    if (process.client) {
      gsap.registerPlugin(ScrollTrigger);
    }
};