React Native旧项目启动报TypeError，疑为依赖冲突（关联React Navigation）

多年未维护的React Native项目无法正常启动，抛出TypeError: undefined is not a function错误，报错位置在node_modules目录下，推测是新旧依赖版本冲突导致。尝试过全量更新依赖，但引发更多错误且需要大量代码重构，因此优先需求是让项目正常启动，而非将所有依赖升级至最新版本。怀疑问题与react-navigation相关，可提供更多代码信息。

package.json #

{
  "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",
    "flow": "flow"
  },
  "dependencies": {
    "@react-native-firebase/app": "^17.3.2",
    "deprecated-react-native-prop-types": "^4.1.0",
    "expo": "^48.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.71.7",
    "react-native-elements": "^3.4.3",
    "react-native-email-link": "^1.13.1",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-hyperlink": "0.0.19",
    "react-native-ionicons": "^4.6.4",
    "react-native-map-link": "^2.7.0",
    "react-native-material-bottom-navigation-performance": "^0.7.8",
    "react-native-modal-dropdown": "^1.0.2",
    "react-native-safe-area-context": "^4.5.2",
    "react-native-screens": "^3.20.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-viewport-units": "0.0.5",
    "react-native-web": "^0.19.4",
    "react-navigation": "^3.11.0",
    "sharp": "^0.32.1",
    "tcomb-form-native": "^0.6.20"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-flow": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@bam.tech/react-native-make": "^1.0.3",
    "babel-preset-expo": "9.0.2",
    "flow-bin": "^0.205.1",
    "react-native-clean-project": "^3.3.0"
  },
  "private": true
}

报错信息 #

TypeError: undefined is not a function

This error is located at:
    in withOrientation (at StackView.tsx:103)
    in RCTView (created by View)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (created by KeyboardAwareNavigator)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:61)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (created by withDevTools(NavigationContainer))
    in withDevTools(NavigationContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:52:19 in showErrorDialog
at node_modules/react/cjs/react.development.js:354:30 in Component.prototype.setState
at node_modules/@react-navigation/native/src/createAppContainer.js:393:21 in NavigationContainer#dispatch
at node_modules/@react-navigation/core/lib/module/getChildNavigation.js:1:1528 in actionHelpers.actionName
at Login.js:139:38 in fetch.then.then$argument_0
- ... 8 more stack frames from framework internals

TypeError: undefined is not a function

This error is located at:
    in NavigationContainer (created by withDevTools(NavigationContainer))
    in withDevTools(NavigationContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:52:19 in showErrorDialog
at node_modules/react/cjs/react.development.js:354:30 in Component.prototype.setState
at node_modules/@react-navigation/native/src/createAppContainer.js:393:21 in NavigationContainer#dispatch
at node_modules/@react-navigation/core/lib/module/getChildNavigation.js:1:1528 in actionHelpers.actionName
at Login.js:139:38 in fetch.then.then$argument_0
- ... 8 more stack frames from framework internals

错误代码示例 #

componentWillUnmount() {
      this._isMounted = false;
      Linking.removeEventListener('url', this._handleOpenURL);
                                 ^
      this.subs && this.subs.remove();

      if (this._isStateful()) {
        _statefulContainerCount--;
      }
    }

问题根源与修复方案 #

1. 核心版本不兼容
   react-navigation 3.x是适配React Native 0.5x-0.6x的旧版本，而当前项目使用的React 18.2.0 + Expo 48（对应React Native 0.71）版本跨度极大，旧版导航库无法适配新版React的生命周期、核心API变更，这是报错的主要原因。

2. Linking API直接错误
   代码中Linking.removeEventListener调用失败，是因为React Native 0.65+之后该方法已被废弃移除，替换为通过订阅对象调用remove()的方式，旧依赖代码未做适配，直接抛出undefined is not a function。

3. 最小改动修复步骤

   • 回退核心依赖版本
     将package.json中核心依赖修改为兼容react-navigation 3.x的版本：

     "expo": "~40.0.0",
     "react": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     

     执行yarn install或npm install，再运行npx react-native-clean-project清除缓存后启动。
   • 临时修复Linking调用
     找到使用Linking.removeEventListener的代码（项目或依赖中），修改为订阅模式：

     // componentDidMount中保存订阅
     this.linkSubscription = Linking.addEventListener('url', this._handleOpenURL);
     // componentWillUnmount中移除订阅
     this.linkSubscription?.remove();
     

     此方法仅能解决单个报错，无法彻底解决导航库与新版React的兼容问题。
   • 锁定依赖版本
     去掉package.json中所有依赖的^符号，确保安装的是指定版本，避免自动升级到不兼容版本。

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