ReactJs元素类型无效检查render方法

Question

I've been trying to solve the error when using tabs in my ReactJS application. So I've created a brand-new app with the command:

 create-react-app my-app

and added the following to the App.js render() function as per react-bootstrap docs:

<Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
  <Tab eventKey={1} title="Tab 1">
    Tab 1 content
  </Tab>
  <Tab eventKey={2} title="Tab 2">
    Tab 2 content
  </Tab>
  <Tab eventKey={3} title="Tab 3" disabled>
    Tab 3 content
  </Tab>
</Tabs>

This is the resulting code:

import React, { Component, Tabs, Tab } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
          <Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
            <Tab eventKey={1} title="Tab 1">
              Tab 1 content
            </Tab>
            <Tab eventKey={2} title="Tab 2">
              Tab 2 content
            </Tab>
            <Tab eventKey={3} title="Tab 3" disabled>
              Tab 3 content
            </Tab>
          </Tabs>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}


export default App;

The App.js file is imported in index.js. Same folder (src folder). This is the file content:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

I still get the error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of App .

I'd say there is no problem with the export as the app works well without the Tabs snippet of code. Apparently, using tabs causes this problem, but I can't figure out what's wrong with the above.

I will appreciate your help. Many thanks.

Answer 1

The error shows up because the module 'react' doesn't actually export any component named Tabs or Tab , so when you try to import them from there, you'll get undefined .

If the component comes from 'react-bootstrap' , import it from there, not from 'react' . See the Getting Started docs for an example.

import React, { Component } from 'react'
import { Tabs, Tab } from 'react-bootstrap'
import logo from './logo.svg'
import './App.css'