服务器端渲染构建错误期间 Gatsby 窗口不可用

Question

我正在尝试构建我的 Gatsby 站点以部署到生产环境，但我遇到了一个问题，我认为这与我的应用程序中的一行代码有关，我使用window重定向到从 GET 请求中检索的外部 url单击按钮即可完成。 我试图通读有关此问题的文档并尝试使用他们的窗口检查条件，但我的重定向要么不起作用，要么收到与Can't resolve 'module'相关的错误。 是否有替代方法可以一起替换window的使用或修复为什么在构建期间运行并导致错误？

错误：

failed Building static HTML for pages - 2.611s

 ERROR #95312

"window" is not available during server side rendering.

窗口代码检查错误：

  WebpackError: ReferenceError: window is not defined

代码：

authClick(e) {
        e.preventDefault();
        this.setState({ authorizing: true }, ()=> {
            axios.get(auth_url)
                .then((res) => {
                    this.setState({
                        authorizing: false
                    })

                    window.location.replace(res.data) // Window call

                    // Attempt to fix the issue based on documentation
                    // if (typeof window !== `undefined`){ 
                    //     const module = require("module")
                    //     window.location.replace(res.data) 
                    // }
                }).catch((err) => {
                    console.log(err)
                })
        });
    }

// Component
    <button className="inline-flex items-center" onClick={this.authClick} disabled={this.state.authorizing}>
    Auth
    </button>

Answer 1

如果您不需要基于window可用性的任何模块，请不要这样做。 在您的情况下，您只需要进行重定向，而不是导入任何模块。

只是：

authClick(e) {
        e.preventDefault();
        this.setState({ authorizing: true }, ()=> {
            axios.get(auth_url)
                .then((res) => {
                    this.setState({
                        authorizing: false
                    })

                     if (typeof window !== `undefined`){ 
                           window.location = res.data 
                     }
                }).catch((err) => {
                    console.log(err)
                })
        });
    }

请注意使用window.location进行重定向的更改，但您也可以根据需要使用window.location.replace 。

Answer 2

const isBrowser = () => typeof window !== "undefined"
isBrowser() && window.location.replace(res.data)

如果你想使用 window.location 那么你必须先检查然后使用isBrowser() && window.location.replace(res.data) instade of window.location.replace(res.data)

Answer 3

提示： put typeof window !== 'undefined' && window.whaterver-you-need来解决这个问题。

Answer 4

文档的链接是正确的，在构建过程中窗口不可用，因此您必须定义检查。

文档中的术语模块将替换为您引用的模块的实际名称。 然后，您将使用文档中提到的窗口检查来包装导入/要求。

出于您的目的，代码如下所示：

...

if (typeof window !== `undefined`){
  window.location.replace(res.data) // Window call
}

...

您不需要 require 模块，因为您没有导入模块。

希望澄清。