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 mand:

 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">Wele 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 ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent 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.

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 mand:

 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">Wele 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 ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent 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.

• javascript
• reactjs
• tabs

• Can you add to your post the code where you mount the <App /> ponent, as well as the directories/hierarchy of your project? – Phillip Commented Apr 30, 2018 at 23:25
• I've added where I mount <App />. Importing Tabs and Tab solved the error but there is no css applied. – user4966361 Commented May 1, 2018 at 0:23

1 Answer 1

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

If the ponent es 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'