使用react-native-rename改名后，React Native项目出现生产包错误

问题原因 #

使用react-native-rename修改应用名称后，项目的环境配置文件可能被意外篡改，导致生产环境错误引入了仅用于开发阶段的React Refresh runtime。

具体修复步骤 #

• 检查并修正babel配置
  打开项目根目录的babel.config.js，确保React Refresh插件仅在development模式下启用，生产环境中完全移除相关配置。示例配置如下：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
        // 此处不能出现react-refresh相关插件
      },
      development: {
        plugins: ['react-refresh/babel'],
      },
    },
  };
  

• 清理缓存并重新构建项目
  执行以下命令彻底清除项目缓存与依赖残留：

  npx react-native start --reset-cache
  rm -rf node_modules && npm install
  cd ios && pod install && cd ..
  

  完成后重新打包生产版本：

  # Android生产打包
  ./gradlew assembleRelease
  # iOS生产打包（可通过Xcode或命令行）
  xcodebuild -workspace YourApp.xcworkspace -scheme YourApp -configuration Release -archivePath ./build/YourApp.xcarchive archive
  

• 检查metro配置文件
  打开metro.config.js，确认生产环境未启用React Refresh相关设置，确保配置仅在开发模式加载该插件。标准配置示例：

  const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  
  const config = {};
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  

  若之前手动添加过React Refresh的metro配置，需移除生产环境下的相关代码。

• 确认环境变量设置
  打包生产版本前，确保NODE_ENV被正确设置为production：

  export NODE_ENV=production # Linux/Mac系统
  set NODE_ENV=production # Windows系统
  

错误截图：

内容的提问来源于stack exchange，提问作者Kanwarjeet Singh