从react-native包导入文件时出现500错误，请求技术支持

问题描述 #

开发聊天App组件时，使用以下代码导入react-native核心组件：

import { View,Text,StyleSheet,TextInput,TouchableOpacity } from "react-native";

触发开发服务器500错误，提示无法解析模块，重建文件后问题依旧。错误信息如下：

Error: Unable to resolve module  from C:\Users\User1\Desktop\app\Screens\File.js:  could not be found within the project or in these directories:
  node_modules
  ..\node_modules
  ..\..\node_modules
> 1 | import { View,Text,StyleSheet,TextInput,TouchableOpacity } from "react-native";
    |                                                                                 ^

项目package.json配置：

{  
  "name": "welpme",  
  "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"  
  },  
  "dependencies": {    
    "@react-navigation/native": "^6.1.6",    
    "@react-navigation/native-stack": "^6.9.12",    
    "expo": "~48.0.11",    
    "expo-font": "~11.1.1",    
    "expo-image-picker": "~14.1.1",    
    "expo-splash-screen": "~0.18.1",    
    "expo-status-bar": "~1.4.4",    
    "firebase": "^9.20.0",    
    "react": "18.2.0",    
    "react-native": "0.71.6",    
    "react-native-document-picker": "^8.2.0",    
    "react-native-fontawesome": "^7.0.0",    
    "react-native-safe-area-context": "4.5.0",    
    "react-native-safe-area-view": "^1.1.1",    
    "react-native-screens": "~3.20.0",    
    "react-native-splash-screen": "^3.3.0",    
    "react-native-svg-transformer": "^1.0.0"  
  },  
  "devDependencies": {    
    "@babel/core": "^7.20.0",    
    "react-native-eject": "^0.2.0"  
  },  
  "private": true
}

解决方案 #

• 清除缓存并重装依赖

  1. 删除项目根目录下的node_modules文件夹
  2. 删除package-lock.json（npm）或yarn.lock（yarn）文件
  3. 执行npm install或yarn install重新安装依赖
  4. 运行expo r -c重启开发服务器并清除Expo缓存

• 移除冲突依赖
  Expo托管项目不需要react-native-eject，执行npm uninstall react-native-eject移除该依赖，之后重新安装依赖并重启服务器。

• 验证文件路径
  确认File.js的路径无特殊字符、大小写错误，文件位置与导入路径逻辑匹配（Windows系统虽不区分大小写，但模块解析可能受文件名拼写影响）。

• 同步Expo与React Native版本
  执行expo install react-native，让Expo自动安装与当前Expo版本匹配的React Native，避免手动指定版本导致的兼容性问题。

• 检查Metro配置
  若自定义过metro.config.js，确认未错误排除react-native模块，可暂时恢复默认配置测试。

内容的提问来源于stack exchange，提问作者The Real Csharp