React.js App Syntax Error JSON.parse Unexpected Character at Line 1 Column 1 of the JSON Data

After deploy react.js application on server I am getting error in contact form as in title. On localhost the form worked without any errors. The problem occurs just after clicking the submit button on the form. Then you can see the error in the console. Do any of you see any error in the code below? Where can look for a solution to this error?

Live version of the contact page

Contact page

ContactForm.js

const ContactForm = () => {
  const [status, setStatus] = useState("Submit");
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");
    const { name, email, subject, business, datetime, launch, message } = e.target.elements;
    let details = {
      name: name.value,
      email: email.value,
      subject: subject.value,
      business: business.value,
      datetime: datetime.value,
      launch: launch.value,
      message: message.value,
    };
    let response = await fetch("https://delightart.co/send", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    setStatus("Submit");
    let result = await response.json();
    alert(result.status);
  };

This Post Has One Comment

  1. No Fault

    I found the issue

    I follow the so suggestion:

    console log response instead of response => response. Son()

    I’m realize that response returns an object like this:

    Response: {
    body: ReadableStream
    locked: false
    : object { … }
    bodyUsed: false
    headers: Headers { }
    ok: true
    redirected: false
    status: 200
    statusText: “OK”
    type: “basic”
    url: “http://localhost:3000/admin/undefined/posts”
    }
    The URL attribute contain an undefined value, so when I try to console.log the .env variable API_URL that contains the localhost URL used in this line:

    fetch(‘http://localhost:4500/posts’, {
    That in real function is:

    fetch(process.env.API_URL + ‘/posts’, {
    The result of the console.log was undefined.

    As it is explained in Create React App docs, the environment variables must start with the prefix REACT_APP_.

    Finally the line works as:

    fetch(process.env.REACT_APP_API_URL + ‘/posts’,

Leave a Reply