时间戳

首页 > 解决方案 > Gatsby 的产品与开发中的 Webpack 进程/浏览器

javascript - Gatsby 的产品与开发中的 Webpack 进程/浏览器

问题描述

我一直在使用 Gatsby 存储库，我注意到在某些情况下（如果不是所有时间）当我调用 window 时，我的部署将失败并出现以下错误

4:57:03 AM: failed Building static HTML for pages - 1.305s
4:57:03 AM: error "window" is not available during server side rendering.
4:57:03 AM: 
4:57:03 AM:   21 | }
4:57:03 AM:   22 | else {
4:57:03 AM: > 23 |     _btoa = btoa.bind(window);
4:57:03 AM:      | ^
4:57:03 AM:   24 |     helpers = function (url) {
4:57:03 AM:   25 |         return new URL(url);
4:57:03 AM:   26 |     };
4:57:03 AM: 
4:57:03 AM:   WebpackError: ReferenceError: window is not defined
4:57:03 AM:   
4:57:03 AM:   - helpers.js:23 
4:57:03 AM:     [gatsby-starter-default]/[web3-providers-ws]/lib/helpers.js:23:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:24 
4:57:03 AM:     [gatsby-starter-default]/[web3-providers-ws]/lib/index.js:24:15
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:44 
4:57:03 AM:     [gatsby-starter-default]/[web3-core-requestmanager]/lib/index.js:44:24
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:22 
4:57:03 AM:     [gatsby-starter-default]/[web3-core]/lib/index.js:22:24
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:29 
4:57:03 AM:     [gatsby-starter-default]/[web3]/lib/index.js:29:12
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1

这似乎可以通过删除我的gatsby-node.js文件中的底部进程/浏览器来纠正，目前看起来像这样

const webpack = require("webpack");

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if(stage === "build-htmnl") {
        actions.setWebpackConfig({
            plugins: [
                new webpack.ProvidePlugin({
                    process: 'process/browser',
                }),
            ],
        })
    }
    actions.setWebpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                Buffer: [require.resolve("buffer/"), "Buffer"],
                process: 'process/browser',
            }),
        ],
        resolve: {
            fallback: {
                "crypto": false,
                "stream": require.resolve("stream-browserify"),
                "assert": false,
                "util": false,
                "http": false,
                "https": false,
                "os": false
            },
        },
    })
}

但是一旦我这样做了，它似乎破坏了开发，因为我useEffect没有正确执行，也没有我作为 onClick 事件附加到按钮的功能。我得到的错误如下：Uncaught (in promise) ReferenceError: process is not defined

有没有办法可以更轻松地解决这个问题？我对 webpack 以及 Gatsby 如何与它交互的方式不太熟悉。我想这就像应用程序是在开发还是生产中的条件一样简单。

标签： javascriptnode.jsreactjswebpackgatsby

解决方案

正如您在添加自定义 webpack 配置文档中所见，stage值可以通过以下方式发生变化：

  • 开发：运行gatsby develop命令时。具有热重载和 CSS 注入页面的配置

  • develop-html：与develop相同，但在babel配置中没有react-hmre，用于渲染HTML组件。

  • build-javascript：生产 JavaScript 和 CSS 构建。创建路由 JavaScript 包以及 JavaScript 和 CSS 的通用块。

  • build-html：生产构建静态 HTML 页面

所以，是的，正如你所指出的，添加一个简单的条件应该可以设置process/browse如下：

if(stage === "develop"){
  // gatsby develop stuff
}

推荐阅读