[Ben Choi] Question for utilizing antd in your boilerplate
hongsukchoi opened this issue · comments
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
}
},
};