安装nativewind后React Native iOS项目启动报错求助

报错信息 #

• TypeError: property is not configurable, js engine: hermes
• Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication() 及相关衍生报错

此前项目运行正常，安装nativewind后执行npm run ios触发上述错误，卸载nativewind后问题仍未消失。

当前配置文件 #

babel.config.js #

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['nativewind/babel', 'react-native-reanimated/plugin'],
};

package.json #

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios --simulator='iPhone 13'",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "link": "react-native link"
  },
  "dependencies": {
    "@eva-design/eva": "^2.1.1",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-native-community/blur": "^4.2.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.0",
    "@stripe/stripe-react-native": "^0.19.0",
    "@supabase/supabase-js": "^2.0.0",
    "@ui-kitten/components": "^5.1.2",
    "@ui-kitten/metro-config": "^5.1.2",
    "base-64": "^1.0.0",
    "base64-arraybuffer": "^1.0.2",
    "moment": "^2.29.4",
    "nativewind": "^2.0.11",
    "postcode": "^5.1.0",
    "react": "18.1.0",
    "react-hook-form": "^7.36.1",
    "react-native": "0.70.0",
    "react-native-actions-sheet": "^0.8.8",
    "react-native-compressor": "^1.6.1",
    "react-native-draggable-grid": "^2.1.6",
    "react-native-gesture-handler": "^2.1.1",
    "react-native-image-picker": "^4.10.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-reanimated": "^2.13.0",
    "react-native-reanimated-carousel": "^3.0.6",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.17.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^13.4.0",
    "react-native-toast-message": "^2.1.5",
    "react-native-url-polyfill": "^1.3.0",
    "use-debounce": "^8.0.4",
    "zustand": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.70.0",
    "@types/react-test-renderer": "^18.0.0",
    "@types/react-timeago": "^4.1.3",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.72.1",
    "react-test-renderer": "18.1.0",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.8.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

已尝试的无效方案 #

• 重启电脑
• 执行 npm start -- --reset-cache
• 进入ios目录执行 pod install
• 卸载nativewind（卸载后错误仍存在）

解决方案建议 #

1. 校验Babel插件顺序：react-native-reanimated的插件必须放在所有其他插件之后（当前配置顺序正确，但可尝试临时移除nativewind插件测试）。若移除后问题消失，说明nativewind版本与RN 0.70不兼容，可尝试降级nativewind到2.0.0左右版本，或升级RN至更稳定版本。

2. 彻底清理构建产物：

   • 删除ios/build文件夹，重新执行pod install和npm run ios
   • 删除node_modules和package-lock.json，重新执行npm install
   • 执行watchman watch-del-all清理watchman缓存

3. 排查Hermes兼容性：临时关闭Hermes测试是否为冲突根源：
   在ios/Podfile中修改：

   use_react_native!(
     :path => config[:reactNativePath],
     :hermes_enabled => false
   )
   

   执行pod install后重启项目，若错误消失，说明Hermes与某依赖冲突，需逐个排查依赖版本。

4. 检查Metro配置冲突：若使用@ui-kitten/metro-config，确保nativewind配置被正确整合，或临时移除@ui-kitten的Metro配置测试是否冲突。

5. 重置项目状态：若以上方案均无效，从Git历史恢复到安装nativewind前的状态，重新安装依赖并构建。

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