[英]How do I use CSS Houdini in Next.js
I would like to use CSS Houdini in a Next.js project I am building.我想在我正在构建的 Next.js 项目中使用 CSS Houdini。 I have installed, via
yarn
, both the CSS Houdini package I want to use along with css-paint-polyfill
.我已经通过
yarn
安装了 CSS Houdini package 我想与css-paint-polyfill
polyfill 一起使用。 I am following the webpack instructions here https://houdini.how/usage我在这里遵循 webpack 说明https://houdini.how/usage
Here is my component:这是我的组件:
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} />;
}
I am getting the dreaded我越来越害怕了
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
I tried putting the import for css-paint-polyfill
in a useEffect, but the throw another error.我尝试将
css-paint-polyfill
polyfill 的导入放在 useEffect 中,但抛出另一个错误。 I even tried const DynamicComponent = dynamic(() => import('../components/hello'))
from https://nextjs.org/docs/advanced-features/dynamic-import , but I did not know how to reference the library.我什至尝试了
const DynamicComponent = dynamic(() => import('../components/hello'))
from https://nextjs.org/docs/advanced-features/dynamic-import ,但我不知道如何参考图书馆。
Has any one solved this?有没有人解决这个问题?
Seems like CSS Paint Polyfill eagerly accesses window
, which means it will throw an error when in an environment which has no window
, such as server phase of Next.好像 CSS Paint Polyfill 急切地访问
window
,这意味着它在没有window
的环境中会抛出错误,例如 Next 的服务器阶段。 There are multiple things you can do.你可以做很多事情。
next.config.js
to stub the aforementioned module when for Webpack when isServer
is true
.isServer
为true
时,修改next.config.js
以对 Webpack 存根上述模块。 You can follow this page of the Next docs for this.window
depending on whether it's available or not.window
是否可用而延迟访问它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.