使用表单标签时React.js'意外令牌'<

Question

I've been making a web app using mern stack with babel, webpack, redux and semantic-ui-react.

But I got an error saying

"Unexpected token <" in bundle.js.

This error only occurs when I send a request clicking a button in form tag. If I make the page without a form tag, it works fine without any error.

This is my codes in React.

handleUpload(title, contents, userId) {
  return this.props.createPostRequest(title, contents, userId).then(
    () => {
      if(this.props.post.status === 'SUCCESS') {
        alert('Your post is saved successfully.');
        browserHistory.push('/');
        return true;
      } else {
        alert('Save Fail: ' + this.props.post.failReason);
        return false;
      }
    }
  );
}

render() {
  return(
    <div className="Write">
      <br/>
      <br/>
      <Form>
        <Container text>
          <Form.Input label='Title' fluid name='title' placeholder='title'
            value={this.state.title} onChange={this.handleChange}>
            <input/>
          </Form.Input>
          <Form.TextArea rows='20' name='contents' placeholder='Write here!'
            value={this.state.contents} onChange={this.handleChange}>
            <textarea/>
          </Form.TextArea>
          <br/>
          <Button.Group>
            <Button color='orange' as={Link} to='/'>Cancel</Button>
            <Button.Or/>
            <Button positive onClick={this.handleUpload}>Save</Button>
          </Button.Group>
        </Container>
      </Form>
    </div>
  );
}

When I type letters and click the save button, I can see an alert message saying

Your post is saved successfully..

And also the data I put is saved in mongodb. But after I click ok, the url changes from 'localhost:3000/post/write ' to ' localhost:3000/post/write?title=blah&contents=blah '. blah in the url is what I put in input tags. Then console says

Unxpected token <.

But, if I don't use a form tag in above codes, it works fine, which I totally have no idea what's wrong about.. The Form tag is from semantic-ui-react. So I need it. If I don't use Form, it would work fine but I should give up the design provided from semantic-ui.

Is there anyone who knows about this? I guess it's related to the HTTP POST in form tags that make trouble for react.js to understand bundle.js in index.html after the server-side handles the post request from that form tag.

Answer 1

TL;DR

handleSubmit = (e) => e.preventDefault()

<Form onSubmit={this.handleSubmit} />

Why?

By default, an HTML form will make GET request to the current URI on submit, see here . Also by default, a button in a form will submit it:

http://codepen.io/levithomason/pen/RpEwWP

<form onsubmit="alert('submitted!')">
  <button>I'll submit</button>
  <button>Me too</button>
</form>

What is happening is, React is rendering a <form /> with some <button /> s inside of it and when you click them, it is making a GET request to the current URI with the form data.

Going out on a limb, I bet your local server that is serving your app doesn't have a handler to accept this request. Going further, I bet it also has a fallback that responds with the index.html on unknown requests. This is commonplace for single page apps to allow the app's soft router to handle routing, rather than the server. This is probably causing your request for bundle.js to actually receive the index.html , hence the unexpected token.

Since you've stated:

...if I don't use a form tag in above codes, it works fine...

Simply preventing the form submit should solve it for you.