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

Question

我正在尝试构建我的 Gatsby 站点以部署到生产环境，但我遇到了一个问题，我认为该问题与我使用 window 的应用程序中的一行代码有关重定向到从单击按钮时发出的 GET 请求中检索的外部 url。我试图通读documentation on this issue并尝试使用他们的窗口检查条件，但我的重定向要么不起作用，要么我收到与 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

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

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