Gatsby配置Webpack process/browser时生产与开发环境冲突如何解决？

你的猜想是正确的，通过Gatsby构建阶段的条件判断即可同时解决部署报错和开发环境异常的问题。
出现该问题的核心原因：你当前的配置在所有构建阶段都全局注入了process/browser这个浏览器端polyfill，该polyfill运行时会访问window对象，而Gatsby执行build-html阶段（服务端渲染生成静态HTML的阶段）运行在Node.js环境，不存在window对象，因此触发部署报错。另外你之前写的stage判断条件存在拼写错误，build-htmnl应为build-html，导致原有的条件判断完全没有生效。

修正后的gatsby-node.js配置 #

const webpack = require("webpack");

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  // 所有阶段通用的webpack配置
  const baseConfig = {
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: [require.resolve("buffer/"), "Buffer"],
      }),
    ],
    resolve: {
      fallback: {
        "crypto": false,
        "stream": require.resolve("stream-browserify"),
        "assert": false,
        "util": false,
        "http": false,
        "https": false,
        "os": false
      },
    },
  };

  // 仅在非服务端渲染阶段注入process的浏览器polyfill
  // 服务端渲染阶段Node原生支持process变量，不需要额外注入
  if (stage !== "build-html") {
    baseConfig.plugins.push(
      new webpack.ProvidePlugin({
        process: "process/browser",
      })
    );
  }

  actions.setWebpackConfig(baseConfig);
};

配置逻辑说明 #

• Gatsby的构建共分为多个阶段，只有build-html阶段是运行在Node.js环境执行服务端渲染逻辑，这个阶段原生支持process变量，不需要注入浏览器端的polyfill，自然不会触发window访问的报错
• 开发环境（develop阶段）和客户端生产JS打包阶段运行在浏览器环境，需要注入process/browserpolyfill，避免出现process未定义的错误
• 移除了原代码中无效的拼写错误的条件分支，避免配置冲突

备选兜底方案 #

如果修改配置后仍有异常，也可以在引入web3相关依赖的地方增加环境判断，仅在浏览器环境下加载对应依赖：

let Web3;
if (typeof window !== "undefined") {
  Web3 = require("web3");
}

这种方式可以从根源上避免服务端渲染阶段加载依赖window的第三方包。

内容的提问来源于stack exchange，提问作者Sabnock66