Next.js and Semantic UI, Tab Element, Error: Element type is invalid

Question

我正在尝试将 tabs from semantic-ui 实施到我的 Next.js 应用程序中。

我收到此错误：

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.

这是代码：

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

我将此组件导入 pages/index.js。来自 semantic-ui 的其他组件（如 Card、Grid 或 Accordion）可以毫不费力地工作。

我正在处理这个例子：https://github.com/zeit/next.js/tree/master/examples/with-semantic-ui

Answer 1

Tab 组件已添加到 0.70.0，请检查您是否 运行 此版本或更高版本。