title: Uncaught TypeError: Cannot read property 'Component' of undefined
body: <p>I'm using the <a href="https://ant.design/components/form/#components-form-demo-register" rel="nofollow noreferrer">Registration Form</a> of <code>ant design UI</code>. I've just copied and paste it but in the Console of Chrome I encountered with this weird error because I haven't modified <code>antd.min.js</code>:</p>
  
  <pre><code>antd.min.js:23 Uncaught TypeError: Cannot read property 'Component' of undefined
      at Object.&lt;anonymous&gt; (antd.min.js:23)
      at t (antd.min.js:7)
      at Object.&lt;anonymous&gt; (antd.min.js:31)
      at t (antd.min.js:7)
      at Object.&lt;anonymous&gt; (antd.min.js:50)
      at t (antd.min.js:7)
      at Object.&lt;anonymous&gt; (antd.min.js:7)
      at t (antd.min.js:7)
      at antd.min.js:7
      at antd.min.js:7
  (anonymous) @ antd.min.js:23
  t @ antd.min.js:7
  (anonymous) @ antd.min.js:31
  t @ antd.min.js:7
  (anonymous) @ antd.min.js:50
  t @ antd.min.js:7
  (anonymous) @ antd.min.js:7
  t @ antd.min.js:7
  (anonymous) @ antd.min.js:7
  (anonymous) @ antd.min.js:7
  (anonymous) @ antd.min.js:7
  (anonymous) @ antd.min.js:7
  </code></pre>
  
  <p><code>index.html</code> looks like:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;React Project&lt;/title&gt;
    &lt;link href="/assets/stylesheet/antd.min.css" rel="stylesheet" type="text/css"&gt;
    &lt;link href="/assets/stylesheet/stylesheet.css" rel="stylesheet" type="text/css"&gt;
    &lt;script src="/assets/antd.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="main"&gt;
      &lt;div id="registration"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="/build/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><code>registration.js</code> looks like: </p>
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  
  import {
    Form,
    Input,
    Tooltip,
    Icon,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete
  } from 'antd';
  
  const FormItem = Form.Item;
  const Option = Select.Option;
  const AutoCompleteOption = AutoComplete.Option;
  
  export default class RegistrationForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        confirmDirty: false,
        autoCompleteResult: []
      };
    }
  
    handleSubmit(e) {
      console.log('i\'m here');
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) =&gt; {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    }
  
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.setState({
        confirmDirty: this.state.confirmDirty || !!value
      });
    }
  
    compareToFirstPassword(rule, value, callback) {
      const form = this.props.form;
      if (value &amp;&amp; value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    }
  
    validateToNextPassword(rule, value, callback) {
      const form = this.props.form;
      if (value &amp;&amp; this.state.confirmDirty) {
        form.validateFields(['confirm'], {force: true});
      }
      callback();
    }
  
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = ['.com', '.org', '.net'].map(domain =&gt; `${value}${domain}`);
      }
      this.setState({autoCompleteResult});
    }
  
    render() {
      const {getFieldDecorator} = this.props.form;
      const {autoCompleteResult} = this.state;
  
      const formItemLayout = {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 8
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        }
      };
      const tailFormItemLayout = {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      };
      const prefixSelector = getFieldDecorator('prefix', {initialValue: '98'})(&lt;Select style={{
          width: 70
        }}&gt;
        &lt;Option value="98"&gt;+98&lt;/Option&gt;
      &lt;/Select&gt;);
  
      const websiteOptions = autoCompleteResult.map(website =&gt; (&lt;AutoCompleteOption key={website}&gt;{website}&lt;/AutoCompleteOption&gt;));
  
      return (
          &lt;Form className="RegistrationForm" onSubmit={this.handleSubmit}&gt;
            &lt;FormItem {...formItemLayout} label="E-mail"&gt;
              {
                getFieldDecorator('email', {
                  rules: [
                    {
                      type: 'email',
                      message: 'The input is not valid E-mail!'
                    }, {
                      required: true,
                      message: 'Please input your E-mail!'
                    }
                  ]
                })(&lt;Input/&gt;)
              }
            &lt;/FormItem&gt;
            &lt;FormItem {...formItemLayout} label="Password"&gt;
              {
                getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                      message: 'Please input your password!'
                    }, {
                      validator: this.validateToNextPassword
                    }
                  ]
                })(&lt;Input type="password"/&gt;)
              }
            &lt;/FormItem&gt;
            &lt;FormItem {...formItemLayout} label="Confirm Password"&gt;
              {
                getFieldDecorator('confirm', {
                  rules: [
                    {
                      required: true,
                      message: 'Please confirm your password!'
                    }, {
                      validator: this.compareToFirstPassword
                    }
                  ]
                })(&lt;Input type="password" onBlur={this.handleConfirmBlur}/&gt;)
              }
            &lt;/FormItem&gt;
            &lt;FormItem {...formItemLayout} label="Phone Number"&gt;
              {
                getFieldDecorator('phone', {
                  rules: [
                    {
                      required: true,
                      message: 'Please input your phone number!'
                    }
                  ]
                })(&lt;Input addonBefore={prefixSelector} style={{
                    width: '100%'
                  }}/&gt;)
              }
            &lt;/FormItem&gt;
            &lt;FormItem {...formItemLayout} label="Website"&gt;
              {
                getFieldDecorator('website', {
                  rules: [
                    {
                      required: true,
                      message: 'Please input website!'
                    }
                  ]
                })(&lt;AutoComplete dataSource={websiteOptions} onChange={this.handleWebsiteChange} placeholder="website"&gt;
                  &lt;Input/&gt;
                &lt;/AutoComplete&gt;)
              }
            &lt;/FormItem&gt;
            &lt;FormItem {...formItemLayout} label="Captcha" extra="We must make sure that your are a human."&gt;
              &lt;Row gutter={8}&gt;
                &lt;Col span={12}&gt;
                  {
                    getFieldDecorator('captcha', {
                      rules: [
                        {
                          required: true,
                          message: 'Please input the captcha you got!'
                        }
                      ]
                    })(&lt;Input/&gt;)
                  }
                &lt;/Col&gt;
                &lt;Col span={12}&gt;
                  &lt;Button&gt;Get captcha&lt;/Button&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
            &lt;/FormItem&gt;
            &lt;FormItem {...tailFormItemLayout}&gt;
              &lt;Button type="primary" htmlType="submit" onClick={this.handleSubmit}&gt;Register&lt;/Button&gt;
            &lt;/FormItem&gt;
          &lt;/Form&gt;
        );
    }
  }
  </code></pre>
  
  <p><code>main.js</code> contains:</p>
  
  <pre><code>import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
  
      const WrappedRegistrationForm = Form.create()(RegistrationForm);
  
      ReactDOM.render(&lt;WrappedRegistrationForm /&gt;, document.getElementById('main'));
  </code></pre>
  
  <p>How can I resolve it?</p>