[Ben Choi] Question for utilizing antd in your boilerplate

[hongsukchoi]

I want to utilize antd and I tested DatePicker. But Whenever I do npm start I get error. Here is my Component and package.json and .babelrc and webpack.config I think this is a problem of this boilerplate. Currently I updated webpack reffering to #186 Thank you

part of my component. omitted some

 import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { createNotice } from '../actions';

import { DatePicker } from 'antd';

//import Button from 'antd/lib/button';  // for js
import { Button } from 'reactstrap';
import { Form, FormGroup, Label, Input } from 'reactstrap';

class NoticeCreate extends Component {
 onSubmit(values) {
        this.props.createNotice(values, () => {
            this.props.history.push('/notice');
        });
    }
    render() {
        const { handleSubmit } = this.props;

        return (
            <div>
                <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    <Field
                        label="제목"
                        name="title"
                        component={this.renderTextField}
                    />
                    {/* <Field 
                    label="분류"
                    name="categories"
                    component={this.renderField}
                /> */}
                    <Field
                        label="내용"
                        name="content"
                        component={this.renderTextAreaField}
                    />
                    <Field
                        lael="첨부파일"
                        name="attached"
                        component={this.renderFileInput}
                        type="file"
                    />
                    {/*This Component*/}
                    <DatePicker onChange={onChange} />

                    <button type="submit" className="btn btn-primary">
                        작성완료</button>
                    <Link to="/notice" className="btn btn-danger">취소</Link>
                </form>
            </div>
        );
    }
}

Package.json

{
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple starter package for Redux with React and Babel support",
  "main": "index.js",
  "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
  "scripts": {
    "start": "webpack-dev-server --progress --colors --open --hot",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^6.4.1",
    "babel-plugin-import": "^1.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-hot-loader": "^4.1.3",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "antd": "^3.5.1",
    "axios": "^0.18.0",
    "babel-preset-stage-1": "^6.1.18",
    "babel-runtime": "^6.26.0",
    "lodash": "^3.10.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-router": "^2.0.1",
    "react-router-dom": "^4.2.2",
    "reactstrap": "^6.0.1",
    "redux": "4.0.0",
    "redux-form": "^7.3.0",
    "redux-promise": "^0.5.3"
  }
}

.babelrc { "presets": ["react", "env", "stage-1"], "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] } webpack.config

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'env', 'stage-1']
        }
      },
    ],

  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.css']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },

};