使用Expo的React Native项目导入自定义组件报错，如何解决？

报错原因 #

1. 你的MainButton组件用了默认导出（export default MainButton），但导入时用了命名导入语法（import { MainButton } from "../components"），两者语法不匹配
2. ../components指向的是文件夹，但该文件夹没有创建索引文件统一导出组件，TypeScript无法识别这个模块的类型声明

方法一：改用默认导入（最快解决） #

直接修改app/index.tsx里的导入语句，使用默认导入语法：

import MainButton from "../components/MainButton";

无需修改任何配置，直接生效。

方法二：创建components文件夹索引文件（适合多组件管理） #

如果想保留import { MainButton } from "../components"的导入方式，需要在/components目录下新建index.ts文件，内容如下：

import MainButton from "./MainButton";

export { MainButton };

之后TypeScript就能识别../components模块，支持命名导入。后续新增组件时，也可以在这个index.ts里统一导出，方便项目组件的集中管理。

可选：配置路径别名简化导入（进阶优化） #

若想避免写冗长的相对路径（比如用@/components代替../components），可以修改项目根目录的tsconfig.json：

1. 在compilerOptions中添加baseUrl和paths配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}

2. 保存配置后重启Expo开发服务器，就能使用import { MainButton } from "@/components"这种简洁的导入方式了。

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