0

I am trying to implement tabs from semantic-ui into my Next.js app.

I am getting this 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. Check the render method of TabExampleBasic.

This is the code:

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]

const TabExampleBasic = () => (
  <Tab panes={panes} />
)

export default TabExampleBasic

I imported this component into pages/index.js. Other components from semantic-ui like Card, Grid or Accordion do work without a hassle.

I am working with this example: https://github.com/zeit/next.js/tree/master/examples/with-semantic-ui

danieljacky
  • 167
  • 1
  • 2
  • 9

1 Answers1

1

Tab component was added in 0.70.0, check that you running this version or higher.

Oleksandr Fediashov
  • 4,315
  • 1
  • 24
  • 42