元素类型无效：应为字符串（用于内置组件）或类/函数答案

【问题标题】：Element type is invalid: expected a string (for built-in components) or a class/function元素类型无效：应为字符串（用于内置组件）或类/函数
【发布时间】：2017-12-07 09:37:45
【问题描述】：

import React from 'react';
import ReactDOM from 'react-dom';
import Map from './components/map/container/map';
import App from './App';
import './index.css';
import shell from './shared/utility/shell';
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware, ConnectedRouter } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'
import registerServiceWorker from './registerServiceWorker';
import { Routes } from './config';

const history = createHistory();
const target = document.querySelector('#root')
const initialState = {};
const enhancers = [];
const middleware = [
thunk,
routerMiddleware(history)
 ];

if (process.env.NODE_ENV === 'development') {
const devToolsExtension = window.devToolsExtension;

if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension());
 }
}
const composedEnhancers = compose(
applyMiddleware(...middleware),
  ...enhancers
);
const store = createStore(
 rootReducer,
 initialState,
 composedEnhancers
);
render(
  <Provider store={store}>
   <ConnectedRouter history={history}>
    <div>
     <Routes />
    </div>
   </ConnectedRouter>
  </Provider>,
  target
   )
 registerServiceWorker();
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

我正在尝试在 redux 的帮助下调用 API 并将其数据显示在表格中。我收到此错误。以上是我的index.js 文件。

1。元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。

2。 React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件。

我参考了很多我无法识别错误的答案。

【问题讨论】：

您正在尝试渲染不是反应组件或功能的东西。最有可能的问题是您的App 或Routes，因为它们似乎是您正在渲染的自定义。仔细检查这些文件的导出以及它们导入的任何文件。
就像@AustinGreco 所说，这是一个导入/导出问题。 check this
我不知道你解决了没有，我曾经遇到过同样的问题，发现我应用了 react-router-redux@next(5.0.0-alphaN) 的代码在旧版本的 react-router-redux 上。

标签： reactjs redux

【解决方案1】：

问题出在导入语句中。您在导入 createHistory 等组件时没有使用大括号。

如果组件使用默认导出，例如：

export default X

然后你可以像这样简单地导入它：

import X from './X';

但如果您使用的是命名导出，例如：

export const X=1;

然后你需要在花括号中导入它，例如：

import {X} from './X';

所以看看你的进口。这将解决您的问题。

【讨论】：

如果在另一个文件夹中我提到过这样...从'./container/map'导入_map；导出 { _map 作为地图 };我需要用大括号将 Map 括起来吗？
在声明class时可以直接写export为：export default class Map{ render{ return();}}，像import Map from ./class一样导入
更正 createHistory 后出现此错误。_WEBPACK_IMPORTED_MODULE_10_history_createBrowserHistory__.createHistory 不是函数
是因为这个吗？
这浪费了我 20 到 30 分钟，我无法弄清楚我做错了什么。现在我知道它是什么了，谢谢你的回答:)

【解决方案2】：

我在我的 react 应用程序中遇到了同样的问题。如上所述，这绝对是您的导入语句。我改变了：

import {x} from '/x.js' 到 import x from '/x.js'

这样就完成了工作

【讨论】：

确实是问题所在。也感谢您的回答

【解决方案3】：

当其中一个嵌套组件尝试渲染一个不存在的组件时，我也遇到了这个错误。具体来说，我尝试使用

<Button ... />

React 中的一个 react-native 组件，我应该在其中使用

<button ... />

【讨论】：

【解决方案4】：

也可能是入口点所在的位置引起的。

在我的例子中，App.js 正在调用 index.js（开发人员控制台正在识别错误，我的 RenderDom 调用在哪里）。

但是，App.js 引用了一个组件，而我在该组件中遇到了错误（对另一个不存在的组件的引用）。

【讨论】：

【解决方案5】：

如上所述，这个问题与导入有关。就我而言，这是一个 CSSTransitionGroup 导入。在 npm 更新后，包 'react-transition-group' 不再包含 CSSTransitionGroup，但它包含不同的导出，例如 CSSTransition 和 TransitionGroup。所以我只是替换行：

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

与

import TransitionGroup from 'react-transition-group/TransitionGroup';

【讨论】：

【解决方案6】：

对我来说，当我忘记在导出中使用 react-redux 的 connect 时，我遇到了这个问题。

所以，

改变：

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

收件人：

export default connect(mapStateToProps, mapDispatchToProps)(ContentTile);

解决了这个问题。真是愚蠢的错误

【讨论】：

【解决方案7】：

在我的情况下，我通过更改组件解决了它：它们是在函数声明中编写的，我通过经典的 Class 声明来更改它们（class App extends React.Component 而不是 function App()）

【讨论】：

嘿！但是这有什么关系呢？它应该适用于类和功能组件。找到原因了吗？

【解决方案8】：

对我来说，我试图在 app.js 中路由一些有问题的组件，因此 index.js 不会呈现 /，因为 app.js 中的导入不正确

所以要始终确保 app.js 中的组件正常工作

【讨论】：

【解决方案9】：

我在尝试将路由添加到我的应用程序时也遇到了类似的问题。然后我意识到我正在从“react-router”导入 { BrowserRouter, Route };而不是从 react-router-dom 正确导入它，如下所示从“react-router-dom”导入 { BrowserRouter, Route }。感谢在线社区

【讨论】：

【解决方案10】：

确保导出组件。如果您已经在导出，那么您可能错过了默认设置。

export default function App(){
 ...
}

【讨论】：

我使用export default 仍然面临同样的问题

【解决方案11】：

这是一种特殊情况，但是当我尝试将两个图表放入一个 ResponsiveContainer 时，Recharts 为我抛出了这个错误。那是not supported。

【讨论】：

【解决方案12】：

如果错误引用的组件的子组件尚未导出其函数/类，您也可能会收到此错误：

所以问题不在于引用的组件，而在于它正在导入的组件（错误文本中未引用）。

我花了一段时间才找到这个混蛋。

【讨论】：

【解决方案13】：

有时，这可能是从错误的库导入的结果，就像我的经验一样，我应该从反应原生元素导入 Input 组件。

import { View, ActivityIndicator, Input } from 'react-native';
import { Input, Button } from 'react-native-elements';

【讨论】：

【解决方案14】：

在我的例子中，我通过删除未定义的组件解决了这个问题。我从错误的模块中导入了该组件。

【讨论】：

【解决方案15】：

可能发生此错误的原因有多种。

这肯定与您的一个进口问题直接相关。这可能是：

npm 包中缺少/未导入的模块。
缺少export 的组件或完全为空的组件正在尝试导入。
混淆了命名/默认导出/导入

【讨论】：

【解决方案16】：

我的问题解决了，问题是用而不是

import { NavLink } from 'react-router-dom'

我用过

import { NavLink } from 'react-dom'

我想说的是，编码包括关注细节。

【讨论】：