reactjsnpmbrowserifyreact-datepickerbabelify

"Unexpected token" will trying react-datepicker


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.


Solution

  • 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.