Gatsby开发报错：Process is not Defined 技术求助

升级Gatsby应用后，依赖更新完成且开发服务器正常启动，但浏览器中应用因Process is not Defined错误异常崩溃。

相关信息 #

• 开发者控制台错误：显示全局process变量未定义的报错
• package.json依赖配置：

// 请替换为你的实际依赖配置
{
  "dependencies": {
    "gatsby": "^5.12.4",
    // 其他依赖项...
  },
  "devDependencies": {
    // 开发依赖项...
  }
}

• webpack覆盖配置（通常在gatsby-node.js中）：

// 请替换为你的实际webpack配置代码
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    // 现有配置内容
  });
};

• gatsby-config.js：

// 请替换为你的实际配置代码
module.exports = {
  siteMetadata: {
    title: "Your Site Title",
  },
  plugins: [
    // 插件列表
  ],
};

• gatsby-node.js：

// 请替换为你的实际代码
exports.createPages = async ({ graphql, actions }) => {
  // 页面创建逻辑
};

解决方案 #

1. 手动注入环境变量到浏览器环境 #

Gatsby v5及以上版本不再自动将Node的process变量注入浏览器环境，需通过webpack的DefinePlugin手动配置：
修改gatsby-node.js：

const webpack = require('webpack');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new webpack.DefinePlugin({
        // 注入全部环境变量，或按需指定特定变量
        'process.env': JSON.stringify(process.env),
        // 示例：仅注入NODE_ENV
        // 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }),
    ],
  });
};

2. 处理第三方依赖的Node环境依赖 #

若报错来自第三方库（如直接使用process的旧版依赖），可通过webpack配置模拟process变量：

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig();
  // 配置node选项模拟process
  config.node = {
    process: 'mock', // 或设为'empty'返回空对象
  };
  actions.replaceWebpackConfig(config);
};

3. 替换自定义代码中的process引用 #

项目中直接使用process.env的代码，建议改用Gatsby的静态查询方式获取环境变量：

1. 在gatsby-config.js中添加环境变量到siteMetadata：

module.exports = {
  siteMetadata: {
    env: {
      NODE_ENV: process.env.NODE_ENV,
      // 其他需要的环境变量
    },
  },
  // 其他配置...
};

2. 在组件中通过useStaticQuery获取：

import { useStaticQuery, graphql } from 'gatsby';

const MyComponent = () => {
  const { site } = useStaticQuery(graphql`
    query EnvQuery {
      site {
        siteMetadata {
          env {
            NODE_ENV
          }
        }
      }
    }
  `);
  const nodeEnv = site.siteMetadata.env.NODE_ENV;
  
  // 使用变量逻辑
  return <div>Current env: {nodeEnv}</div>;
};

export default MyComponent;

4. 清除缓存重新构建 #

执行命令清除Gatsby缓存，避免旧配置残留：

gatsby clean && gatsby develop

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