Gatsby运行时报process未定义错误，参照StackOverflow方案修改仍未解决

• 你当前的webpack配置仅在build-html阶段注入了process polyfill，但Gatsby在客户端运行、开发模式等其他阶段没有对应的注入逻辑，浏览器环境本身没有全局process对象，访问时就会抛出process is not defined错误
• OrderDetails.js中直接在组件顶层执行了process.browser的读取操作，该代码会在SSR编译、客户端初始化两个阶段都执行，只要对应阶段没有process全局变量就会报错

方案1：替换process.browser的使用（推荐） #

直接通过判断window是否存在来识别浏览器环境，完全规避对process变量的访问，不需要额外依赖、也无需修改webpack配置，是Gatsby场景下的最优解。
将OrderDetails.js中的对应代码：

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent)

替换为：

const iOS = typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)

方案2：修正webpack配置全阶段注入polyfill #

如果你需要保留对process变量的使用，就修改gatsby-node.js中的配置，移除阶段限制让process polyfill在所有运行阶段生效，同时记得在文件顶部引入webpack：

// gatsby-node.js顶部新增引入
const webpack = require('webpack')

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  const rules = []
  // 仅build-html阶段需要用null loader处理不兼容SSR的第三方包
  if (stage === 'build-html') {
    rules.push({ test: /react-spring-3d-carousel/, use: loaders.null() })
  }
  actions.setWebpackConfig({
    module: { rules },
    plugins: [
      // 所有阶段都注入process polyfill
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],
  })
}

注：你当前配置中的modifyBabelrc在Gatsby v2及以后版本已经废弃，可后续替换为onCreateBabelConfig使用，不影响当前问题的修复。

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