React集成Auth0报process is not defined错误如何解决

process is not defined是浏览器端运行时无法识别Node.js全局对象process导致的。你直接套用了Auth0官方为CRA（Create React App）脚手架编写的示例代码，出现该报错90%以上的原因是你的项目是用Vite初始化的：

• CRA脚手架默认做了浏览器端兼容，会注入process.env对象用于读取REACT_APP_前缀的环境变量
• Vite不会向浏览器端暴露Node.js内置的process全局对象，也不支持REACT_APP_前缀的环境变量规则，直接访问process.env就会触发当前报错。
  少数情况下CRA项目环境变量加载失败、构建缓存异常也会触发同类问题。

如果你用的是Vite搭建的React项目 #

这是最高发的场景，按以下步骤修改即可：

1. 修改根目录下的环境变量文件（和package.json同级的.env文件），把原来REACT_APP_前缀的变量改成Vite要求的VITE_前缀：

VITE_AUTH0_DOMAIN=你的Auth0应用域名
VITE_AUTH0_CLIENT_ID=你的Auth0客户端ID

2. 修改auth0-provider-with-history.jsx中的环境变量读取逻辑，把process.env替换为Vite提供的import.meta.env对象，同步修改变量名：

import React from 'react';
import { useNavigate } from 'react-router-dom'
import { Auth0Provider } from '@auth0/auth0-react';

const Auth0ProviderWithHistory = ({ children }) => {
  const domain = import.meta.env.VITE_AUTH0_DOMAIN;
  const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

  const navigate = useNavigate();

  const onRedirectCallback = (appState) => {
    navigate(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};

export default Auth0ProviderWithHistory;

3. 完全停止本地开发服务后重新启动，Vite只会在服务启动时加载环境变量，热更新不会读取新的环境变量配置。

如果你用的是Create React App搭建的项目 #

按以下顺序排查修复：

• 确认.env文件存放在项目根目录（和package.json同级），没有放到src等子目录下
• 确认所有需要在浏览器端读取的环境变量都以REACT_APP_开头，不存在拼写错误
• 删除node_modules/.cache缓存目录，重新安装依赖后重启开发服务
• 如果是react-scripts 5.0+版本偶发该问题，可以通过react-app-rewired配置补充process对象的浏览器端polyfill即可解决。

内容的提问来源于stack exchange，提问作者Tomáš Gabriel