React中process.env在特定函数内失效问题求助

原本正常运行的process.env配置今日出现异常：在自定义fetch钩子的某段代码中调用process.env时提示错误信息：ReferenceError: process 未定义，位于 fetchData (useFetch.js:49:23)，但该钩子的父级函数及同函数其他位置均可正常使用process.env。

相关配置与代码 #

webpack.config配置 #

const env = dotenv.config().parsed;
// 转换为webpack可识别的格式
const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next]);
  return prev;
}, {});
return {
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(
        path.dirname(fileURLToPath(import.meta.url)),
        "public/index.html"
      ),
      filename: "index.html",
    }),
    new webpack.DefinePlugin(envKeys),
  ],
  // ...其他配置
}

自定义fetch钩子代码片段 #

async function fetchData(apiPath, formData = null, method = null) {
  method =
    formData === null && method === null
      ? "get"
      : formData !== null
      ? "post"
      : method;

  if (!apiPath) return;
  setLoading(true);
  try {
    let xsrfToken = localStorage.getItem("xsrfToken");
    if (xsrfToken !== "undefined") {
      xsrfToken = JSON.parse(xsrfToken);
    } else {
      xsrfToken = null;
    }

    const response = await fetch(process.env.REACT_APP_BACK_URL + apiPath, { // process.env正常工作
      method: method,
      mode: "cors",
      credentials: "include",
      headers: {
        "x-xsrf-token": xsrfToken,
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: formData,
    });
    const fetchResponse = await response.json();
    if (auth.accessToken) {
      // 已登录时检查token
      console.log(process.env.ACCESS_TOKEN); // 此处仍正常工作

      let decodedToken = jwtDecode(
        fetchResponse.accessToken,
        process.env.ACCESS_TOKEN, // 此处报错process未定义
        {
          algorithms: process.env.ALGORYTHM,
        }
      );
    }
  // ...后续代码
}

问题原因及解决办法 #

1. 核心原因：jwtDecode参数传参错误 #

你当前调用jwtDecode时传了3个参数，但该库的标准API仅接受2个参数：token和配置对象（包含secret、algorithms等选项）。错误的传参结构干扰了webpack的静态替换逻辑，导致该位置的process.env未被正确替换为实际值。

修正写法：把密钥和算法合并到同一个配置对象中：

let decodedToken = jwtDecode(
  fetchResponse.accessToken,
  {
    secret: process.env.ACCESS_TOKEN,
    algorithms: process.env.ALGORYTHM
  }
);

2. 次要排查点：编译缓存残留 #

今日突然出现异常，大概率是webpack编译缓存导致旧代码未被更新。执行以下操作清理缓存：

• 删除node_modules/.cache文件夹（webpack 5默认缓存目录）
• 删除dist或build编译产物目录
• 重启开发服务器

3. 隐性检查：环境变量与配置逻辑 #

• 检查.env文件中ALGORYTHM的拼写（正确应为ALGORITHM），若变量名不匹配，会导致webpack替换后的值为undefined，叠加参数错误可能触发异常。
• 在webpack配置中打印envKeys，确认process.env.ACCESS_TOKEN和process.env.ALGORYTHM对应的取值是正确的字符串（需包含引号，因为JSON.stringify会自动添加）。

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