您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入答案

【问题标题】：You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入
【发布时间】：2019-06-02 04:42:50
【问题描述】：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import  createHistory  from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import  ConnectedRouter  from 'react-router-redux';
import { Route, Switch } from 'react-router';
import Home from "./pages/Home";
import Register from "./pages/Register";
import CourseManagerDashboard from "./pages/CourseManagerDashboard";
import CourseDetail from "./pages/CourseDetail";
import App from './app/App';
import LoginForm from './components/LoginForm';

const store = createStore(
    state => state
);
const history = createHistory();

ReactDOM.render((
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route name="home" exact path="/" component={Home} />
                <Route name="register" path="/register" component={Register} />
                <Route name="course-manager-dashboard" path="/course-manager-dashboard" component={CourseManagerDashboard} />
                <Route name="course-detail" path="/course-detail" component={CourseDetail} />
                <Route name="login" path="/login" component={LoginForm} />
                <Route path="/" component={App} />
            </Switch>
        </ConnectedRouter>
    </Provider>
),document.getElementById('app'));

出现以下错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。无法追踪问题的确切位置。

【问题讨论】：

您的一个组件导入可能不正确
@dentemm 感谢您的快速回复，我在 phpstorm 编辑器上编写代码时没有看到任何错误，但是当保存文件并在浏览器上查看前端渲染时，我得到了这个错误，它在编辑器中显示全部正确导入。
您在共享的代码中导入了您创建的组件。确保所有这些组件类都以导出默认类开头。它不应该是导出类
@hemadri 肯定会检查

标签： reactjs redux react-redux react-router redux-form

【解决方案1】：

我知道这可能听起来很傻，但请尝试使用简单的console.log 检查所有导入的组件：

console.log('Provider', Provider);
console.log('ConnectedRouter', ConnectedRouter);
console.log('Route', Route);
console.log('Switch', Switch);
console.log('Home', Home);
console.log('Register', Register);
console.log('CourseManagerDashboard', CourseManagerDashboard);
console.log('CourseDetail', CourseDetail);
console.log('App', App);
console.log('LoginForm', LoginForm);

把这个放在ReactDOM.render之前，const history = createHistory();之后

带有undefined 的行导致了问题。

【讨论】：

我已将替换为，所以现在运行良好，但他们中的许多人说要使用 ConnectedRouter Ref: oreilly.com/library/view/learning-redux/9781786462398/…跨度>
如果我使用版本“react-router-redux”：“^4.0.8”，那么我必须导入不带花括号的 ConnectedRouter，但是当使用最新的 Alpha 版本时，我可以将其称为 { ConnectedRouter}，但即使这样在渲染时也会给我一些其他错误。
请使用connected-react-router npm 包而不是react-router-redux。用花括号导入它：import { ConnectedRouter } from 'connected-react-router';。请参阅项目 GitHub 页面上的 usage。
肯定会检查的。谢谢。 @david molnar
如果您发现我的回答有帮助，请将其标记为答案（请参阅答案正文旁边的勾号）。

【解决方案2】：

就我而言，导入是正确的。我只需要删除导入部分中导入的类名周围的大括号

曾经是

import {DropDownPicker} from 'react-native-dropdown-picker';

我只需要移除 DropDownPicker 周围的大括号

【讨论】：

【解决方案3】：

检查您的导入和您使用的组件。确保其中任何一个都不是完全空白的。

【讨论】：

我通过修复导入解决了我的问题。我通过取消注释代码块来找出导致错误的原因，然后检查该块的导入。

【解决方案4】：

删除 node_modules 和 package-lock.json 文件。
然后运行npm install

【讨论】：