Expo-cli执行yarn start报process is not defined错误如何解决

本地环境配置为expo-cli 5.4.10，配套Node.js版本v16.14.0，执行yarn start启动项目后，浏览器访问时控制台抛出报错：

ReferenceError: process is not defined

此前尝试的三类修复操作均未解决问题，已执行操作包括：

• 运行npm install react-scripts@latest安装最新版react-scripts
• 运行npm install --save-dev react-error-overlay@6.0.9安装指定版本开发依赖
• 在项目package.json文件中添加如下resolutions配置：

"resolutions": {
    "react-error-overlay": "6.0.9"
}

注意：此前尝试的方案是针对Create React App项目的，Expo项目不依赖react-scripts，安装react-scripts反而可能引入依赖冲突，第一步先执行npm uninstall react-scripts移除误装的依赖。

• 对齐Expo Web打包依赖版本：执行npx expo install react-native-web react-dom @expo/webpack-config，自动安装和当前expo版本匹配的web端打包依赖，不要手动指定不匹配的版本号。
• 补全浏览器端process全局变量polyfill：如果安装完依赖仍报错，先执行yarn add -D process webpack安装缺失的polyfill包，再在项目根目录新建webpack.config.js文件，写入以下配置：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const webpack = require('webpack');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 补全process模块polyfill
  config.resolve.fallback = {
    ...config.resolve.fallback,
    process: require.resolve('process/browser')
  };
  // 注入全局process变量
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  );
  return config;
};

• 清除缓存重启服务：配置写完后不要直接启动，执行yarn start -c强制清除Metro和Webpack的旧缓存再启动，缓存残留是配置不生效的常见原因。
• 版本兼容性校验：如果以上操作仍报错，检查当前项目使用的Expo SDK版本，expo-cli 5.4.10最高兼容Expo SDK 46版本，如果项目SDK版本高于46，要么将expo-cli升级到对应版本搭配Node.js 18使用，要么将项目SDK降级到46及以下匹配当前cli版本，版本错配会导致打包时全局变量注入逻辑失效。
• 业务代码排查：检查前端侧代码中是否存在直接读取process.env下非EXPO_PUBLIC_前缀变量的写法，Expo打包时只会将EXPO_PUBLIC_开头的环境变量注入到客户端代码，其余Node端的process变量不会被打包到浏览器运行环境中。

内容的提问来源于stack exchange，提问作者Игорь Калмыков