为什么在 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");     
  }, []);

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

why importing CSSRulePlugin in Next.js results in error?

reactjs

webpack

next.js

gsap