Cannot read property 'Component' of undefined - reactjs

Question

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.

Answer 1

A bit late to this, but this sounds like a typescript error. If anyone else comes across this change
import React, {Component} from 'react'
to
import * as React from 'react'

Answer 2

I couldn't see your codebase but I guess the reason is that you are trying to import on demand, but didn't use babel-plugin-import in your project.
Please refer to the Import on Demand section in the docs.
If you are using create-react-app, you can check the instructions here.

Answer 3

I don't know about Ant design components, but from the stack trace that you've provided, I can say that the antd object is not present. It may be due to antd not loading properly. I would suggest you to check if antd is being loaded or not by trying to console.log(antd) or whatever is the name of the object.
Also, kindly provide the related code to let us help you better.

Answer 4

The problem was in my gulp and browserify configuration. I tried to change the technology I'm using and I switch to webpack with many more benefits than gulp that can be read in the following link:
gulp vs browserify vs webpack

Answer 5

If you are facing this error the try these two ways as well. It will work:
Error:
Solution 1:
import React from "react";
class Greetings extends React.Component {
render() {
return <div>working</div>;
}
}
Solution 2:
import React, { Component } from 'react';
class Greetings extends Component {
render() {
return <div>working</div>;
}
}