重新排列文件结构引发“元素类型无效”错误答案

【问题标题】：Rearranging File Structure Throwing "Element type is invalid" Error重新排列文件结构引发“元素类型无效”错误
【发布时间】：2017-11-13 18:03:24
【问题描述】：

我正在将应用程序中的代码重新组织到一堆子文件夹中。我将顶部导航组件移动到名为导航的子文件夹中，该组件构成了“主导航”容器的一部分。但是，当我将 top-nav 转移到新文件夹时，我开始收到以下错误

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出您的组件。检查TopNavTemplate的渲染方法。

我已经阅读了很多帖子，但我无法弄清楚为什么改变位置会导致这种情况。我已经确保组件指向文件重组中的适当导入（这些错误无论如何都会在当前错误之前抛出，所以它至少认为它正确地拉入了所有内容。）我也不认为这是一个导入语句中的语法错误 - 我将顶部导航连接到我的 redux 存储作为默认导出，并且我没有在 {} 之间导入它。

顶部导航导出的代码如下：

import React from 'react';
import {Link} from 'react-router-dom';
import ClickOutside from 'react-click-outside';
import {IconSprite} from '../general/icons.js';
import {Modal} from './modal.js';
import {HeaderSelect} from './select.js';
//Import statements that connect TopNav to the redux store
import * as actionCreators from '../../actions/actionCreator.js';
import { bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import logo from '../../logo.svg';


export class TopNavTemplate extends React.Component {
//Render function and a bunch of code goes here
}

function mapStateToProps(state) {
  return {
    selectedTarget: state.selectedTarget,
    availableTargets: state.availableTargets,
    modal: state.modal,
    currentUser: state.currentUser,
    isLoggedIn: state.isLoggedIn
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

const TopNav = connect(mapStateToProps, mapDispatchToProps)(TopNavTemplate);

export default TopNav;

然后我将 TopNav 导入到我的主导航布局中，如下所示：

import React from 'react';
import TopNav from '../components/navigation/top-nav.js';
import {SideNav} from '../components/side-nav.js';

export class MainNav extends React.Component{

    render(){
        return ([
            <TopNav />,
            <SideNav />
        ])
    }
  }

如果我将导入语句更改为从旧版本的文件中提取

从 ../components/top-nav.js 导入 TopNav

一切都像一个魅力。我什至尝试删除该文件以防止任何类型的 web-pack 混淆，但这似乎不是问题。出于某种原因，现在将此文件移动到不同的文件夹会导致导出未定义而不是正确的反应组件？感觉很失落。

【问题讨论】：

标签： reactjs webpack redux

【解决方案1】：

结果证明这是一个非常愚蠢的错误 - 我在转移所有内容时忘记保存我正在导入的文件之一。由于某种原因，这并没有引发找不到导入的错误，而是导致包装的连接组件返回未定义。

【讨论】：