Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 (React/Redux App)

Question

I am trying to signup/login a user using JWT. For this I have a working API which I have created.

Now, I want to use that authentication API with my React/Redux App.

When a user signs up I dispatch an action from my Signup component -

const signUpHandler = (e) => {
    e.preventDefault();

    dispatch(signup(name, email, password));
  };

Now, in my userSlice I have the following reducer -

signup: (state, action) => {
      fetch("http://localhost:5000/user/signup", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(action.payload),
      })
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
        });
    },

After I click on Signup ie; after the fetch process begins, I get this error -

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

After digging in a little bit, I found that this error occurs when the return type from fetch is not JSON. But my API works prefectly fine.

Any idea what might be the issue?

Thanks in advance.

Answer 1

I just discovered the mistake and it was quite silly. This might prevent someone from committing the same mistake.

When dispatching the signup/login action,

instead of dispatch(signup(name, email, password));

Do - dispatch(signup({name, email, password}));

The main error was the action.payload was not what was expected(ie; an object). As a result of which the data sent to the server was incorrect.