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

Question

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

但是当我这样导入时：

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");     
  }, []);