React Native无法检测已存在的Main.jsx文件，求解决方法

问题描述 #

React Native项目中导入./src/components/Main.jsx时，报错提示不存在..\src\components\Main.jsx及相关后缀/索引文件，但该文件实际存在于对应路径下。使用反斜杠也无法解决问题。环境版本：React Native 0.71.3、React 18.2.0、Node.js 18.14.2。

相关代码：

App.js #

import React from 'react'
import Main from './src/components/Main.jsx'

export default function App() {
  return <Main />
}

Main.jsx #

import React from 'react'
import { Text, View } from 'react-native'

const Main = () =>{
    return (
        <View>
            <Text>Hola Mundo</Text>
        </View>
    )
}

export default Main

解决方案 #

• 移除导入语句中的文件后缀
  React Native的模块解析器默认支持.jsx、.js等后缀的自动识别，显式指定后缀可能导致解析异常。修改导入语句为：

  import Main from './src/components/Main'
  

• 清除Metro缓存并重启服务
  缓存异常可能导致路径解析错误，执行以下命令重置缓存并重启：

  npx react-native start --reset-cache
  

  之后重新运行项目：

  # Android
  npx react-native run-android
  # iOS
  npx react-native run-ios
  

• 确认Metro配置中的后缀解析
  检查项目根目录的metro.config.js，确保解析器包含.jsx后缀。默认配置如下，若自定义配置需保证resolver.sourceExts包含jsx：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  const config = {};
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  

  若需手动指定后缀，可添加：

  const config = {
    resolver: {
      sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx']
    }
  };
  

• 检查文件名大小写一致性
  尽管Windows系统不区分文件名大小写，但Metro解析器可能严格匹配。确保导入的Main与实际文件名Main.jsx大小写完全一致，避免因大小写差异导致的路径识别错误。

内容的提问来源于stack exchange，提问作者ALEJANDRO VALENZUELA RUIZ