如何在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急切地访问window，这意味着它在没有window的环境中会抛出一个错误，比如Next的服务器阶段。你可以做很多事情。

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