'Uncaught SyntaxError: Unexpected token <' on Login Form

'Uncaught SyntaxError: Unexpected token <' on Login Form

In my NextJS app.I'm developing a login page and now I'm getting the following error.

Uncaught SyntaxError: Unexpected token <

This was not appearing before and it started appearing yesterday.I googled the error message and browsed through many SO answers but none of them were helpful.I removed all form related onSubmit and onChange code but the error is still there.Since which code causes this error,I will post entire Login component here.

import React, { Component } from 'react';
import Heading from '../components/Heading';

class Login extends Component{

constructor(props) {
    super(props);
    this.onChangeInput = this.onChangeInput.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
        date: new Date().toJSON().slice(0,10),
        username: '',
        password: ''
    }
}

onChangeInput(e) {

    this.setState({
        [e.target.name]: e.target.value
    });
}

onSubmit(e) {
    e.preventDefault();
    const t = {
        date: new Date().toJSON().slice(0,10),
        username: this.state.username,
        password: this.state.password
    }
    fetch('/server', {
        method: 'POST',
        headers: {'Content-Type':'application/json'}, 
        body: JSON.stringify(this.state)
    })

    this.setState({
        username: '',
        password: ''
    });
}

render(){
    return(
        <div>
            <div style={{textAlign: "center"}}>
                <h1>PackMasters Ceylon (Pvt) Ltd</h1>
                <h2>Inventory Management System</h2>
                <h3>Login</h3>
            </div>
        <form onSubmit={this.onSubmit} onChange={this.onChangeInput} className={"col-md-4 col-md-offset-4"}>
            <Heading title="Login | PackMasters Ceylon (Pvt) Ltd" />
            <div className={"form-group"}>
                <label htmlFor="username">Username</label>
                <input type="text" name="username" value={this.state.username} className={"form-control"} id="username"/>
            </div>
            <div className={"form-group"}>
                <label htmlFor="passsword">Password</label>
                <input type="password" name="password" value={this.state.password} className={"form-control"} id="password" />
            </div>
            <div className={"form-group"}>
                <input type="submit" className={"form-control"} value="Log In"/>
            </div>
        </form>
        </div>
    );
}
}

export default Login;

After struggling a lot, I found out that it is caused by the browser cache.The problem was solved after clearing browser cache on Chrome.Still I'm not able to explain the exact reason for that.However I will mention here how to clear cache on Google Chrome.

  1. On your computer, open Chrome.
  2. At the top right, click More.
  3. Click More tools > Clear browsing data.
  4. At the top, choose a time range. To delete everything, select All time.
  5. Next to "Cookies and other site data" and "Cached images and files," check the boxes.
  6. Click Clear data


A few issues:

  1. The change handler should go on each input, not on the form
  2. A bad idea to set the timestamp in the constructor... Seems you were already going in the right direction...
  3. If you convert the handlers into arrow functions (no this context) no need to bind in the constructor (that's just a side note...)

Try this:

import React, { Component } from 'react';
import Heading from '../components/Heading';

class Login extends Component {
  state = { username: '', password: '' };

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = e => {
    e.preventDefault();
    const user = {
      date: new Date().toJSON().slice(0, 10),
      username: this.state.username,
      password: this.state.password,
    };
    fetch('/server', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user),
    });

    this.setState({ username: '', password: '' });
  };

  render() {
    return (
      <div>
        <div style={{ textAlign: 'center' }}>
          <h1>PackMasters Ceylon (Pvt) Ltd</h1>
          <h2>Inventory Management System</h2>
          <h3>Login</h3>
        </div>
        <form
          onSubmit={this.handleSubmit}
          className={'col-md-4 col-md-offset-4'}
        >
          <Heading title="Login | PackMasters Ceylon (Pvt) Ltd" />
          <div className={'form-group'}>
            <label htmlFor="username">Username</label>
            <input
              type="text"
              name="username"
              value={this.state.username}
              className={'form-control'}
              id="username"
              onChange={this.handleChange}
            />
          </div>
          <div className={'form-group'}>
            <label htmlFor="passsword">Password</label>
            <input
              type="password"
              name="password"
              value={this.state.password}
              className={'form-control'}
              id="password"
              onChange={this.handleChange}
            />
          </div>
          <div className={'form-group'}>
            <input type="submit" className={'form-control'} value="Log In" />
          </div>
        </form>
      </div>
    );
  }
}

export default Login;

Edit: Add a then and a catch block to fetch:

fetch('/server', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(user),
}).then(res => res.json())
  .then(response => console.log('Success:', JSON.stringify(response)))
  .catch(error => console.error('Error:', error));

Also, I noticed you are using Next.js... You need to install Isomorphic Unfetch https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch


And make sure your "esversion":6 is 6 for that follow below flow

For Mac VSCode : Code(Left top corner) => Prefrences => Settings => USER SETTINGS. and check at right side and write below Code

{
  "workbench.colorTheme": "Visual Studio Dark",
  "git.ignoreMissingGitWarning": true,
  "window.zoomLevel": 0,
  // you want to write below code for that
  "jshint.options": {
      "esversion":6
  },
}