反应本性不变违规:元素类型无效

Question

当我打算在iPhone Expo上运行我的React本机应用程序时，此错误在红色背景区域中显示。

不变的违规：元素类型无效：预期字符串（用于内置组件） 或类/功能（用于复合组件），但获取：对象。你 可能忘记从定义的文件中导出组件。

这是'src/组件/'文件夹中的app.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class App extends Component {
  render() {
    return (
    	<View>
      		<Text>Hello</Text>
      	</View>
    );
  }
}

这是React-Native App文件夹中的主要app.js。

import App from './src/components/App';

我使用Expo应用程序来运行此代码。如何解决此错误？

Answer 1

博览会期望您从/App.js导出组件。但是现在您只导入/App.js。博览会没有收到任何要渲染的组件。您需要导出这样导入的组件：

export default App;

在侧面注：仅在必须时使用类组件。

Answer 2

在我的情况下而不是这样的导出：

export default App;

...我像以下内容一样出口：

export {LoginForm};

它工作完全很好。

Answer 3

我从以下样式进行导出而没有指定默认导出。我没有指定默认值，因为我从一个文件中导出了多个小组件。

export const  Modal  = (props) => (
    <div className="someClass">
    </div>        
  )

我能够通过在导入语句中添加括号来使其正常工作。

import {Modal} from '../components/Modal.js'

Answer 4

我也有同样的问题，我把 export default前 class yourclassname extends Component在app.js

Answer 5

对于它的价值，我恰好遇到了这个问题，它使我陷入困境2天。我的错误是创建和重命名某些文件 - 愚蠢的，而我的项目仍在运行。这无意中弄乱了我的一些道路/进口。我没有看到VS代码中的任何问题，但是每次我运行该项目时，它将在完整清洁后首次工作，然后当我刷新时，我会遇到此错误：

ERROR  TypeError: undefined is not a function, js engine: hermes
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication).
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

我只知道这是一个问题，因为我让我的同事使用我的分支来同步该项目并在他的Mac上进行测试，而且效果很好。解决方案可能是先尝试清洁Android，iOS和Watchman，如果那不起作用，我建议尝试从机器中删除项目文件夹并重新粘结回购并再次运行。

有用的干净脚本可以尝试：

对于Android：

watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules && rm -rf yarn.lock && yarn cache clean && yarn && cd android && ./gradlew cleanBuildCache && cd ..

iOS：

watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf ~/Library/Developer/Xcode/DerivedData && rm -rf node_modules && rm -rf yarn.lock && rm -rf ios/build && yarn cache clean && yarn && cd ios && pod install --repo-update && cd ..