Could not parse File as JSON: vercel.json

[sajgoniarz (Marek Naharnowicz)]

Hi guys!

I have a legacy app created using Create React App and i have to add CSP headers. I found that i can add it via adding vercel.json to root folder.
File looks like this:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "frame-src https://www.etermin.net;"
        }
      ]
    }
  ]
}

After pushing changes build fails with error from title:

For development i use JetBrains Raider on Windows 10, file is UTF-8 encoded and there are no tricky white space characters.
I even tried to reduce the file to:

{
  "name": "test"
}

but with same results.

What’s the problem here?

[pawlean (Pauline P. Narvas)]

Hi, @sajgoniarz! Welcome to the Vercel Community.

Thanks for your patience! After taking a look at your JSON file, I recommend checking the following:

1. Ensure there are no trailing commas in your JSON file. JSON doesn’t allow trailing commas after the last item in an object or array.
2. Check for any invisible characters that might have been introduced. Sometimes, copy-pasting can introduce non-printable characters.
3. Verify that you’re using double quotes (") and not single quotes (') for strings in your JSON.
4. Make sure the file is saved with UTF-8 encoding without BOM (Byte Order Mark).

Example JSON

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "frame-src https://www.etermin.net"
        }
      ]
    }
  ]
}

A few things to note:

1. There’s no trailing comma after the "value" field.
2. The "source" field uses a regex pattern to match all routes.
3. The "value" for the CSP header doesn’t have a semicolon at the end.

If you’re still encountering issues:

1. Use a JSON validator (like JSONLint) to check your vercel.json file for any syntax errors.
2. Try creating the vercel.json file from scratch, typing it out manually instead of copy-pasting.
3. If you’re using Windows, ensure that your text editor is set to use LF (Line Feed) instead of CRLF (Carriage Return Line Feed) for line endings.
4. You can also try adding the CSP headers directly in your React application using the react-helmet library if the vercel.json approach continues to fail.
5. If none of these solutions work, you might want to try deploying a minimal version of your app with just the vercel.json file to isolate the issue.

Let us know how you get on!