为什么在 Next.js 中导入 CSSRulePlugin 会出错？

Question

我正在尝试在我的 Next.js 项目中使用 GSAP 库，我从React jsap下载了该库的 npm 版本。

但是当我像这样导入它时：

import { gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin"; 

它抛出一个错误，该错误似乎是由 CSSRulePlugIn 引起的，因为当我从导入中删除它时一切都很好。

错误：

Answer 1

显然，出现此错误是因为 GSAP 尝试访问window客户端浏览器的元素，但由于我在 Next.js (SSR) 中使用它，因此会导致该错误，因为没有window可以获取的元素。

所以我最终通过仅在确保代码在客户端运行之后才导入来解决问题CSSRulePlugin，为此我将其导入到useEffect方法中并且它起作用了。

这是我的案例的代码：

  useEffect(() => {
      const GSAP = require("gsap/CSSRulePlugin");
      const { CSSRulePlugin } = GSAP;
      gsap.registerPlugin(CSSRulePlugin); 
      // do whatever you want to do with the plugin, its Working now...
      // for example
      let imageReveal = CSSRulePlugin.getRule(".container:after");     
  }, []);