Reactjs未捕获的错误：元素类型无效：预期为字符串

Question

I get the following error:

"Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App "

I have checked and doubled checked my code and I cannot workout the problem.

Anyone know why? See code below.

App.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
//import ReactD3, {BarChart, LineChart} from 'react-d3-components';
import {MenuList} from './menu/menulist.js';
import {TabList} from './menu/tablist.js';
import {TabContainer, TabContent, TabPane, Nav, Tab, Row, Col} from 'react-bootstrap';

class App extends Component{
  constructor(props){
    super(props);
  }
  render(){
    console.log("Here 1")
    const menunames = [
      {id: "first", name: "Tab 1"},
      {id: "second", name: "Tab 2"}
    ];

    const plist = [
      {id: "first", name: "Content 1"},
      {id: "second", name: "Content 2"}
    ];
    console.log("Here 2")
    return (
       <div className="app">
        <Tab.Container id="left-tabs-example">
        <Row className="clearfix">
          <Col sm={4}>
            <MenuList items={menunames} />
          </Col>
          <Col sm={8}>
              <TabList panels={plist} />
          </Col>
        </Row>
      </Tab.Container>
     </div>
   );
  }
}

export default App

menulist.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {TabContainer, TabContent, TabPane, Nav, NavItem, Tab, Row, Col} from 'react-bootstrap';

class MenuList extends Component{
  constructor(props){
    super(props);
  }

  MenuItem({ menuitems }){
    return menuitems.map(item => (
      <NavItem eventKey={item.id}>
        {item.name}
      </NavItem>
    ))
  }

  render(){
    return (
      <Nav bsStyle="pills" stacked>
        <MenuItem menuitems={this.props.items} />
      </Nav>
    )
  }
}

MenuList.propTypes = {
  items: React.PropTypes.array
}

export default MenuList

tablist.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {TabContainer, TabContent, TabPane, Nav, Tab, Row, Col} from 'react-bootstrap';

class TabList extends Component{
  constructor(props){
    super(props);
  }

  TabPanel({ pans }){
    return pans.map(panel => (
      <Tab.Pane eventKey={panel.id}>
        {panel.name}
      </Tab.Pane>
    ))
  }

  render(){
    return (
      <Tab.Content animation>
        this.props.panels.map(panel => (
          <Tab.Pane eventKey={panel.id}>
            {panel.name}
            </Tab.Pane>
          )
      </Tab.Content>
    )
  }
}

TabList.propTypes = {
  panels: React.PropTypes.array
}

export default TabList

Answer 1

import {MenuList} from './menu/menulist.js'; // not correct
import {TabList} from './menu/tablist.js';

If You have export default You don't need curly bracers in import .

import MenuList from './menu/menulist.js'; //correct
import TabList from './menu/tablist.js';


Export {MyComponent, MySecondComponent};  -> import {MyComponent, MySecondComponent} from './path';
Export default MyComponent -> import MyComponent from './path';