Expo React Native导出组件报TypeError: undefined is not an object如何解决

问题根因 #

你遇到的报错本质是从./views导入的组件实际值为undefined，用到组件的路由数组触发了取值报错，调换数组顺序报错目标变化对应两种常见场景：

• 第一种是./views目录的聚合导出逻辑不匹配：
  你当前用命名导入语法引入组件，但如果你的单页面组件用的是export default默认导出，./views/index.js里的export * from './xxx'写法不会导出默认导出的内容，导致你导入的组件都是undefined。
• 第二种是存在循环依赖：
  如果你的路由配置文件被views目录下的任意页面组件引入，同时你又在路由配置里引入页面组件，就形成了循环引用。JS解析循环依赖时只会返回已经解析完成的部分导出值，后定义的路由数组用到的组件就会变成undefined，所以调换两个路由数组的顺序，报错的目标也会跟着变化。

解决步骤 #

1. 先修复导出不匹配问题 #

首先检查./views/index.js的导出写法：

• 若单页面组件用export default ComponentName默认导出，聚合导出要按如下写法：

// ./views/index.js
export { default as SettingsPage } from './SettingsPage'
export { default as ListenPage } from './ListenPage'
export { default as MainSettingsPage } from './MainSettingsPage'
export { default as DepositePage } from './DepositePage'

• 若单页面组件用export const ComponentName = () => {}命名导出，可以用export * from './xxx'批量导出，注意不要和默认导出混用。

可以先在路由配置文件里直接导入单个页面文件测试：import MainSettingsPage from './views/MainSettingsPage'，如果导入后不再报该组件的undefined错误，就确认是聚合导出写法问题。

2. 排查循环依赖问题 #

如果导出写法无误，就按如下步骤排查循环依赖：

• 检查所有views目录下的页面组件，有没有导入当前路由配置文件的代码，如果有就把需要用到的常量/配置抽离到独立的公共文件，打断循环引用链路。
• 可以安装circular-dependency-plugin配置到打包工具中，自动定位具体的循环依赖路径。

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