Cannot read property 'Component' of undefined

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.7.3

Environment

Windows 10, Chrome (latest version)

Reproduction link

https://stackoverflow.com/questions/51593464/cannot-read-property-component-of-undefined

Steps to reproduce

Whenever I wanna use an Ant design Component I catch an error with this title:

antd.min.js:23 Uncaught TypeError: Cannot read property 'Component' of undefined
    at Object.<anonymous> (antd.min.js:23)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:31)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:50)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:7)
    at t (antd.min.js:7)
    at antd.min.js:7
    at antd.min.js:7

I use the latest version (3.7.3)

In this part I’ve used Layout Component of ant design:

import React, {Component} from 'react';

import ReactDOM from 'react-dom';
    
import { Layout, Menu, Icon } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

ReactDOM.render(
  <Layout>
    <Sider
      breakpoint="lg"
      collapsedWidth="0"
      onBreakpoint={(broken) => { console.log(broken); }}
      onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
    >
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
        <Menu.Item key="1">
          <Icon type="user" />
          <span className="nav-text">nav 1</span>
        </Menu.Item>
        <Menu.Item key="2">
          <Icon type="video-camera" />
          <span className="nav-text">nav 2</span>
        </Menu.Item>
        <Menu.Item key="3">
          <Icon type="upload" />
          <span className="nav-text">nav 3</span>
        </Menu.Item>
        <Menu.Item key="4">
          <Icon type="user" />
          <span className="nav-text">nav 4</span>
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header style={{ background: '#fff', padding: 0 }} />
      <Content style={{ margin: '24px 16px 0' }}>
        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
          content
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2018 Created by Ant UED
      </Footer>
    </Layout>
  </Layout>,
  document.getElementById('main'));

but I unfortunately face with error, while I just copied the antdesign code. I don’t know what is the problem, please help me.

What is expected?

The code works like it seems in the website.

What is actually happening?

antd.min.js:23 Uncaught TypeError: Cannot read property ‘Component’ of undefined at Object.<anonymous> (antd.min.js:23) at t (antd.min.js:7) at Object.<anonymous> (antd.min.js:31) at t (antd.min.js:7) at Object.<anonymous> (antd.min.js:50) at t (antd.min.js:7) at Object.<anonymous> (antd.min.js:7) at t (antd.min.js:7) at antd.min.js:7 at antd.min.js:7

[afc163]

Fixed in https://github.com/react-component/menu/commit/b933ba9817d5130f206fb4e5416c360128e69604

[ztplz]

@wilkog You should wrap element in Menu.Item.