Expo运行React Native Web端报process is not defined错误求助

• 使用Expo搭建React Native应用，已尝试更新依赖等通用排查方案，问题未解决
• 运行Web端时页面显示错误提示：An unexpected error has occurred.
• 控制台抛出ReferenceError: process is not defined运行时错误
• 错误参考截图：
  

ReferenceError: process is not defined
    at Module.RNiq (index-1b0e10d3020a016605d2.js:1:237007)
    at l (webpack-e067438c4cf4ef2ef178.js:1:563)
    at index-1b0e10d3020a016605d2.js:1:457536
    at main-41e61ebd24edb78847da.js:1:19485
    at main-41e61ebd24edb78847da.js:1:19653
ue @ main-41e61ebd24edb78847da.js:1

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

• 这是Expo SDK 45版本Web构建的已知缺陷：该版本默认Webpack配置未自动注入Node.js process对象的浏览器端polyfill，浏览器原生运行环境不存在process全局变量，当项目依赖（包括Expo SDK自身模块）存在process.env相关调用时，就会直接抛出引用错误。
• 常规的全量更新依赖操作无法修复该问题，问题根源是Expo构建层配置缺失，不是业务依赖版本兼容问题。

按优先级依次尝试以下方案，操作完成后必须加-c参数清除缓存重启服务，否则旧构建缓存会导致修复不生效。

方案1：引入官方polyfill（首选） #

1. 安装官方提供的process polyfill包：

expo install expo-process

2. 在项目入口文件（通常是根目录App.js/App.tsx）的最顶部引入该包，保证它在所有其他业务代码、依赖代码之前加载：

// 这行必须放在所有import的最前面
import 'expo-process';
// 后续放原有导入代码，例如
import { StatusBar } from 'expo-status-bar';
import React from 'react';
// ...其余代码

3. 清除缓存启动服务：

expo start -c

方案2：手动修改Webpack配置注入polyfill #

如果方案1无效，手动修改Webpack配置补全全局变量：

1. 安装Expo Webpack配置依赖和process浏览器polyfill：

expo install @expo/webpack-config
npm install process

2. 在项目根目录新建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 fallback
  config.resolve.fallback = {
    ...config.resolve.fallback,
    process: require.resolve('process/browser')
  };
  // 全局注入process对象
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  );
  return config;
};

3. 清除缓存启动服务：

expo start -c

方案3：升级Expo SDK版本 #

Expo SDK 46及以上版本已官方修复该配置缺陷，可直接升级SDK版本彻底解决问题：

expo upgrade 46

升级完成后执行expo start -c清除缓存启动即可。

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