React Native导入报错：导入声明必须位于模块顶层

1. 排查导入语句位置 #

逐行检查项目中所有.js/.jsx/.ts/.tsx文件，所有import语句必须放在文件最顶部，绝对不能嵌套在函数、条件判断、try/catch等代码块内部。

错误示例：

async function fetchData() {
  import { ApiService } from './services/ApiService'; // 错误：导入不在顶层
  // ...
}

正确写法：

import { ApiService } from './services/ApiService'; // 正确：顶层位置

async function fetchData() {
  // ...
}

2. 彻底清理缓存 #

缓存堆积经常导致这类奇怪的语法报错，执行以下命令清空所有缓存：

# 重置RN打包缓存
npx react-native start --reset-cache

# 清理Android构建缓存
cd android && ./gradlew clean && cd ..

之后重新运行npx react-native run-android。

3. 检查Babel配置 #

确认项目根目录的.babelrc或babel.config.js配置符合React Native标准，避免自定义插件干扰语法解析：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

如果之前添加过额外的Babel插件，尝试暂时移除，测试是否能正常构建。

4. 统一模块语法 #

不要在同一个文件里混用import（ES模块）和require（CommonJS），统一使用import/export语法。如果某个依赖只能用require，可以单独放在顶层，不要嵌套在代码块内。

5. TypeScript配置检查（如果用TS） #

打开tsconfig.json，确保module和target字段设置正确：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES6",
    // 其他配置保持默认即可
  }
}

错误的TS编译配置会导致输出代码不符合RN的语法要求。

6. 排查第三方依赖 #

最近新增的npm包可能存在语法问题，尝试移除最近添加的依赖，重新构建项目。如果确定是某个依赖导致的，查看该包的Issues页面，或者降级到之前的稳定版本。

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