1

我想在我正在构建的 Next.js 项目中使用 CSS Houdini。我已经通过 安装yarn了我想与css-paint-polyfill. 我在这里遵循 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 中，但抛出另一个错误。const DynamicComponent = dynamic(() => import('../components/hello'))我什至从https://nextjs.org/docs/advanced-features/dynamic-import尝试过，但我不知道如何引用该库。

有没有人解决这个问题？

4

1 回答 1

0

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

  1. 修改你next.config.js的 stub 上述模块 when for Webpack when isServeris true。您可以为此关注Next 文档的此页面。
  2. 创建一个仅在客户端上导入的动态组件（我看到您已经尝试过，但它应该可以工作，所以如果您分享了您在这方面所做的事情，我可以找出您的方法有什么问题）。
  3. 创建一个问题并将 PR 发送到托管 Polyfill 的存储库，window以便根据它是否可用进行延迟访问。
于 2020-12-25T12:46:56.120 回答