React Native加载Welcome.js至App.js时出现模块解析错误

错误信息 #

ERROR in ../src/screens/Welcome.js 6:4
模块解析失败：意外的标记(6:4)
已使用以下加载器处理该文件：

• C:\Users\Riyaz\AppData\Roaming\npm\node_modules\expo-cli\node_modules\source-map-loader\dist\cjs.js
  可能需要额外的加载器来处理这些加载器的输出结果。
  （错误信息重复出现两次）

问题代码片段 #

const Welcome = () => {
  return (
<View>
    Welcome

问题原因 #

该错误核心是JSX语法未被正确解析，主要由以下几点导致：

• 未导入View组件，React无法识别该JSX标签
• JSX标签未闭合（缺少</View>）
• 文本内容未包裹在Text组件内（React Native强制要求所有文本必须放在Text组件中）

解决步骤 #

1. 修正Welcome.js代码
   补全组件导入、闭合标签并规范文本渲染：

   import { View, Text } from 'react-native';
   
   const Welcome = () => {
     return (
       <View>
         <Text>Welcome</Text>
       </View>
     );
   };
   
   export default Welcome;
   

2. 验证App.js中的导入路径
   确保导入路径与文件实际位置一致，示例：

   import Welcome from './src/screens/Welcome';
   

3. 清除缓存并重启项目
   执行命令清除Expo缓存，避免缓存导致的解析异常：

   expo r -c
   

4. 确认项目配置
   若为手动配置webpack的项目，需确保配置中包含babel-loader处理JSX；标准Expo初始化项目无需额外修改配置。

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