Unable to use antd FormItem after following example exactly

Question

Following the example code exactly. I have encountered this error . Only when i excluded wrapping the input with FormItem that the error disappeared. Anyone else having this issue? I followed the code exactly.

Using antd@3.10.7 react@16.5.2

My code: import React from 'react'; import { Form, Select, Input, Button } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

class NewForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      }

      handleSelectChange = (value) => {
        console.log(value);
        this.props.form.setFieldsValue({
          note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
      }

    render() {
        const { getFieldDecorator } = this.props.form;
        const hi = <Input />;
        console.log('hi', hi, typeof hi);
        return (
            <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('note', {
                    rules: [{ required: true, message: 'Please input your note!' }],
                    })(<Input />)}
                </FormItem>
                <FormItem>
                        {getFieldDecorator('gender', {
                        rules: [{ required: true, message: 'Please select your gender!' }],
                    })(
                        <Select
                        placeholder="Select a option and change input text above"
                        onChange={this.handleSelectChange}
                        >
                        <Option value="male">male</Option>
                        <Option value="female">female</Option>
                        </Select>
                    )}
                </FormItem>
                <FormItem >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </FormItem>
            </Form>
        );
    }
}


export default Form.create()(NewForm);

Answer 1

I manage to solve the error by upgrading the following webpack modules. Hope it helps anyone else who comes along.

Old package.json

"@babel/cli": "7.0.0-beta.55",
"@babel/core": "7.0.0-beta.55",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.55",
"@babel/plugin-proposal-export-default-from": "^7.0.0-beta.55",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.55",
"@babel/plugin-transform-arrow-functions": "^7.0.0-beta.55",
"@babel/plugin-transform-runtime": "7.0.0-beta.55",
"@babel/polyfill": "^7.0.0-beta.55",
"@babel/preset-env": "7.0.0-beta.55",
"@babel/preset-react": "7.0.0-beta.55",

New package.json

"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.5",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-arrow-functions": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.5",
"@babel/preset-react": "^7.0.0",