我在运行gatsby build
时遇到了一个问题,这似乎是相当常见的。
failed Building static HTML for pages - 5.310s
ERROR #95312
"window" is not available during server side rendering.
See our docs page for more info on this error: https://gatsby.dev/debug-html
ReferenceError: window is not defined
所以,在互联网上发表了多篇文章之后,我第一次尝试了检查我是否处于浏览器环境中的方法。
const isBrowser = typeof window !== 'undefined';
构建仍然中断,所以这让我相信错误是来自我的项目中的第三方依赖关系。
因此我遵循其他解决方案在gatsby-config.ts
上添加一些配置,以“绕过”一些构建步骤。
exports.onCreateWebpackConfig = ({ actions, loaders, stage }: any) => {
if (stage === 'build-html' || stage === 'develop-html' || stage === 'develop') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /filler-module/,
use: loaders.null(),
},
],
},
});
}
};
这也不起作用。
因此,我的想法是在运行gatsby build
时以某种方式绕过此检查。有办法做到吗?或者您是否看到此错误的其他可能解决方案?
谢谢
1条答案
按热度按时间zzlelutf1#
首先澄清一下,当你说你尝试了isBrowser检查时,你实际上用
if(isBrowser) {window.example}
Package 了对window的任何调用,对吗?检查,正如你刚才提到的,在你的代码中放置特定的const定义-它需要在每个使用window的组件中定义,你仍然需要用if语句检查isBrowser常量来 Package 每个对window的引用。话虽如此,如果你没有对window进行有问题的调用,听起来你可能正在使用一个不是为服务器端渲染编写的React依赖项。您可以尝试的一个简单的解决方案是在客户端引导而不是服务器呈现期间使用库"Loadable Components"来加载整个组件。你可以编写一个 Package 器组件,它反过来调用你的实际组件loadable-components:
然后,您可以简单地导入这个可加载的 Package 器,并将其放置在您的JSX代码中通常调用组件的位置。