如何在 Next.js 中使用 CSS Houdini

Question

我想在我正在构建的 Next.js 项目中使用 CSS Houdini。我已经通过yarn 安装了我想与css-paint-polyfill 一起使用的CSS Houdini 包。我在这里遵循 webpack 的说明https://houdini.how/usage

这是我的组件：

import 'css-paint-polyfill';
import workletURL from 'url-loader!css-houdini-lines';
import styles from './Separator.module.css';

CSS.paintWorklet.addModule(workletURL);

export default function Separator() {
  return <div className={styles.separator} />;
}

我越来越害怕了

error - ReferenceError: window is not defined
at /home/tithos/code/web/new-tim/node_modules/css-paint-polyfill/dist/css-paint-polyfill.js:1:239

我尝试将 css-paint-polyfill 的导入放在 useEffect 中，但抛出另一个错误。我什至从https://nextjs.org/docs/advanced-features/dynamic-import 尝试了const DynamicComponent = dynamic(() => import('../components/hello'))，但我不知道如何引用该库。

有人解决了吗？

Answer 1

似乎 CSS Paint Polyfill 急切地访问了window，这意味着它在没有window 的环境中会抛出错误，例如Next 的服务器阶段。您可以做很多事情。

1. 当isServer 是true 时，修改你的next.config.js 以存根上述模块。为此，您可以关注this page of the Next docs。
2. 创建一个仅在客户端导入的动态组件（我看到您已经尝试过，但它应该可以工作，所以如果您分享了您在这方面所做的事情，我可以找出您的方法有什么问题） .
3. 创建一个问题并将 PR 发送到 the repository where the Polyfill is hosted，以便根据 window 是否可用而懒惰地访问它。