React Native/TypeScript报错：undefined is not an object (evaluating 'react_1.default.Component')

我之前碰到过一模一样的问题！这种报错和PropTypes完全没关系，核心是代码里尝试访问React.default.Component但React.default是undefined，一般和React的导入方式或者依赖版本不兼容脱不了干系，尤其是你用了老版本的react-navigation（StackNavigator属于v1/v2版本，现在已经被@react-navigation/native取代了）。

先给你几个快速排查的方向 #

• 检查依赖版本兼容性：老版react-navigation对React和React Native的版本有严格要求。比如react-navigation@2.x需要React Native >= 0.55.0、React >= 16.3.0。你可以在项目根目录运行下面的命令，把版本信息贴出来：

  npm list react react-native react-navigation
  # 或者用yarn的话
  yarn list react react-native react-navigation
  

• 修改React导入方式：把默认导入改成命名空间导入试试，有时候babel或者打包工具的模块解析会出问题：

  // 把原来的 import React from 'react'; 改成
  import * as React from 'react';
  

  之后组件定义保持class XXX extends React.Component就行，这样就不会用到React.default了。
• 检查babel配置：如果你自定义了babel.config.js或者.babelrc，确保没有错误配置模块转换插件。比如@babel/plugin-transform-modules-commonjs如果配置不当，可能会破坏ES模块的默认导入解析。

你需要上传的文件/信息 #

1. 项目根目录的package.json：里面的依赖版本是排查兼容性的关键
2. 完整的报错堆栈信息：不要只贴一行，完整的日志能帮我们定位到底是哪个文件、哪个环节触发的错误
3. 这段代码所在的入口文件（比如App.js或者index.js）：看看你是怎么导出组件的
4. 如果有自定义的babel配置文件（babel.config.js/.babelrc）也一起贴出来

附一个修改导入后的示例代码 #

import * as React from 'react';
import { StackNavigator } from 'react-navigation';
import SideMenu from 'react-native-side-menu';
import Home from './app/screens/Home/Home';
import Menu from './app/components/Menu/Menu';

const Nav = StackNavigator({
  Home: { 
    screen: Home,
    navigationOptions: {
      // 这里补上你的导航配置，比如title之类的
    }
  }
});

class App extends React.Component {
  render() {
    return (
      <SideMenu menu={<Menu />}>
        <Nav />
      </SideMenu>
    );
  }
}

export default App;

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