reactjs 如何迫使盖茨比即使有错误也要建造

g52tjvyc 于 2023-05-06 发布在 React

关注(0)|答案(1)|浏览(146)

我在运行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时以某种方式绕过此检查。有办法做到吗？或者您是否看到此错误的其他可能解决方案？
谢谢

reactjs

来源：https://stackoverflow.com/questions/76076925/how-to-force-gatsby-build-even-with-errors

1条答案

按热度按时间

zzlelutf1#

首先澄清一下，当你说你尝试了isBrowser检查时，你实际上用if(isBrowser) {window.example} Package 了对window的任何调用，对吗？检查，正如你刚才提到的，在你的代码中放置特定的const定义-它需要在每个使用window的组件中定义，你仍然需要用if语句检查isBrowser常量来 Package 每个对window的引用。
话虽如此，如果你没有对window进行有问题的调用，听起来你可能正在使用一个不是为服务器端渲染编写的React依赖项。您可以尝试的一个简单的解决方案是在客户端引导而不是服务器呈现期间使用库"Loadable Components"来加载整个组件。你可以编写一个 Package 器组件，它反过来调用你的实际组件loadable-components：

import loadable from '@loadable/component';
import React from 'react';

export default function LoadableWrapperMyComponent() {
    //Choose either Option A or B:

    //Option A: MyComponent is a JSX file representing the component you need to wrap, specify a relative path to the file
    const LoadableWrapperMyComponent = loadable(() => import('./MyComponent'), {
      fallback: <div>Loading...</div>,
    });
    
   //Option B: Same as A, but for a component from an npm package 
    const LoadableWrapperMyComponent = loadable(() => import('some-npm-package/MyNPMComponent'), {
      fallback: <div>Loading...</div>,
    });
}

然后，您可以简单地导入这个可加载的 Package 器，并将其放置在您的JSX代码中通常调用组件的位置。

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 如何迫使盖茨比即使有错误也要建造

1条答案

相关问题

热门标签

最新问答