I'm trying to set up the code provided on the page of the react-datepicker.
My build toolchain is composed of npm and browserify.
I have the following package.json
{
"name": "datepicker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "browserify -o public/bundle.js -v -d main.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babelify": "^7.0.0",
"browserify": "^12.0.1",
"browserify-css": "^0.14.0",
"react": "16.5",
"react-datepicker": "^2.0.0",
"react-dom": "^16.5",
"reactify": "^1.1.1"
},
"browserify-css": {
"autoInject": true,
"minify": true,
"rootDir": ".",
"output": "backend/public/bundle.css"
},
"browserify": {
"transform": [
"babelify",
"browserify-css"
]
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2"
}
}
My main.js is composed as follow :
import React from "react";
import ReactDOM from "react-dom"
import DatePicker from "react-datepicker";
// CSS Modules, react-datepicker-cssmodules.css
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return (
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>
);
}
}
ReactDOM.render(<Example />, document.getElementById('app'))
Then I run
npm run start
And I've got this message
SyntaxError: /home/mylogin/test_react_go/datepicker/main.js: Unexpected token (26:6)
I spent some time to understand the problem, and haven't found any solution. I'd be glad if someone more used to modern js tools could help me.
Here we go my solution (that work), if a developer that comes from a backend language, browse to this StackOverflow question :) You can find below a package.json that is able to generate the react project in two file bundle.js & bundle.css from an ES6 code source.
{
"name": "datepicker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "browserify -o 'public/bundle.js' -v -d main.js -p [ parcelify -o public/bundle.css ] "
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "16.5",
"react-datepicker": "^2.0.0",
"react-dom": "^16.5"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
]
]
},
"style": [
"./node_modules/react-datepicker/dist/react-datepicker-cssmodules.css"
],
"devDependencies": {
"parcelify": "^2.2.0",
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babelify": "^10.0.0",
"babel-plugin-react-css-modules": "^5.0.0",
"browserify": "^12.0.1"
}
}
I'm open to comment or improvement.