React Native运行iOS项目报错：无法解析DatePickerIOS模块

执行react-native run-ios运行项目时，出现如下错误：

Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from /Users/antonhorl3/WebstormProjects/sagly/client/node_modules/react-native/index.js:
不存在以下任一文件：

node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)

15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
16 | import typeof Button from './Libraries/Components/Button';
17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
|                                   ^
18 | import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
19 | import typeof FlatList from './Libraries/Lists/FlatList';
20 | import typeof Image from './Libraries/Image/Image';

at ModuleResolver.resolveDependency (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:107:15)
at DependencyGraph.resolveDependency (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
at Object.resolve (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce ()
at resolveDependencies (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at async addDependency (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
at async Promise.all (index 0)

未修改代码，仅更新Xcode后出现该问题，react-native模块中的导入语句正确且文件确实存在。

环境信息 #

System:
    OS: macOS 13.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 40.24 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 23, 26, 29, 30, 31
      Build Tools: 19.1.0, 23.0.1, 23.0.3, 27.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7199119
    Xcode: 14.3/14E222b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 5.0.1-alpha.2 => 5.0.1-alpha.2 
    react: 18.0.0-rc.0 => 18.0.0-rc.0 
    react-native: 0.65.3 => 0.65.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

已尝试的解决方法 #

• 重启电脑
• 执行react-native start -- --reset-cache
• 执行rm -rf /tmp/metro-*
• 执行yarn start --reset-cache
• 执行watchman watch-del-all
• 删除node_modules并重新安装

期望应用能正常运行，无此错误。

package.json 内容 #

{
  "name": "client",
  "version": "0.0.1",
  "private": true,
  "rnpm": {
    "assets": [
      "assets/fonts"
    ]
  },
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/react-native-fontawesome": "0.2.7",
    "@invertase/react-native-apple-authentication": "2.1.5",
    "@notifee/react-native": "^5.2.1",
    "@react-native-async-storage/async-storage": "1.15.14",
    "@react-native-community/cli": "5.0.1-alpha.2",
    "@react-native-community/masked-view": "0.1.11",
    "@react-native-community/netinfo": "7.1.7",
    "@react-native-firebase/app": "^14.8.0",
    "@react-native-firebase/messaging": "^14.8.0",
    "@react-native-google-signin/google-signin": "7.0.1",
    "@react-native-picker/picker": "^1.8.3",
    "@react-navigation/native": "6.0.2",
    "@react-navigation/stack": "5.14.4",
    "i18next": "^21.8.14",
    "jwt-decode": "3.1.2",
    "lodash": "4.17.21",
    "moment": "^2.29.4",
    "raygun4reactnative": "1.1.5",
    "react": "18.0.0-rc.0",
    "react-i18next": "^11.18.1",
    "react-native": "0.65.3",
    "react-native-android-keyboard-adjust": "1.2.0",
    "react-native-codegen": "0.0.7",
    "react-native-eject": "^0.2.0",
    "react-native-elements": "3.3.2",
    "react-native-fast-image": "^8.6.3",
    "react-native-fs": "^2.19.0",
    "react-native-gesture-handler": "1.10.3",
    "react-native-google-mobile-ads": "^9.1.1",
    "react-native-iap": "^12.8.3",
    "react-native-image-picker": "^4.7.3",
    "react-native-image-resizer": "^1.4.5",
    "react-native-in-app-review": "^4.1.1",
    "react-native-localize": "^2.2.2",
    "react-native-offline": "^6.0.0",
    "react-native-purchases": "^5.13.0",
    "react-native-ratings": "^8.1.0",
    "react-native-responsive-screen": "1.4.2",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "3.6.0",
    "react-native-searchable-dropdown": "^1.1.3",
    "react-native-share": "^7.3.6",
    "react-native-snap-carousel": "3.9.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "12.1.1",
    "react-native-triangle": "^0.0.9",
    "react-native-vector-icons": "8.1.0",
    "react-native-view-shot": "^3.1.2",
    "react-native-webview": "11.6.4",
    "react-native-wheel-scroll-picker": "^0.2.4",
    "react-native-youtube-iframe": "2.1.0",
    "react-navigation": "4.4.4",
    "react-navigation-stack": "2.10.4",
    "styled-components": "^5.3.5",
    "tcomb-form-native": "0.6.20"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/runtime": "7.13.10",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.23.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.65.2",
    "react-native-clean-project": "^4.0.1",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

解决方案 #

方法1：降级Xcode版本 #

React Native 0.65.3发布于2021年，不兼容2023年发布的Xcode 14.3。Xcode 14.3使用了新的Swift版本和SDK，老版本RN存在适配问题。可以降级到Xcode 13.4.1，该版本与RN 0.65.x完全兼容。

方法2：修改Metro配置，添加文件扩展名映射 #

在项目根目录创建或修改metro.config.js，添加以下内容：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts },
  } = await getDefaultConfig();
  return {
    resolver: {
      sourceExts: [...sourceExts, 'ios.js'],
    },
  };
})();

修改完成后重新执行react-native run-ios。

方法3：升级React Native版本 #

升级到RN 0.69.x及以上版本，这些版本已适配Xcode 14。注意升级前备份项目，同步升级相关依赖（如react、react-navigation等），避免版本冲突。

内容的提问来源于stack exchange，提问作者Anton Hörl