Skip to main content

How to Resolve the "Manifest: Line: 1, column: 1, Syntax error" Error in JavaScript

The Manifest: Line: 1, column: 1, Syntax error is a common error in web development that appears in the browser's developer console. It almost always means that the browser tried to fetch your manifest.json file but received something else instead—usually an HTML "404 Not Found" page.

This guide will explain the common causes of this error and walk you through the steps to fix it, from correcting the path in your index.html to ensuring your JSON is valid.

What Causes the Error? The Core Problem​

This error occurs when the browser follows the <link rel="manifest" ...> tag in your HTML, makes a request, and the server's response is not a valid JSON file.

The "Line: 1, column: 1, Syntax error" is a very specific clue. The first character of a valid JSON file must be {. However, if the path to your manifest is wrong, the server returns a 404 error page, which is an HTML document. The first character of an HTML document is almost always < (from <!DOCTYPE html>).

The browser's JSON parser sees the < character at the very beginning of the file, realizes it's not a valid start to a JSON object, and throws the syntax error at line 1, column 1.

Solution 1 (Most Common): Fix the Path in index.html​

The most frequent cause is a simple incorrect path in the href attribute of your <link> tag.

How to Debug:

  1. Open your browser's Developer Tools (F12) and go to the Network tab.
  2. Reload your page.
  3. Look for the manifest.json request. If it has a 404 status, the path is wrong.

For example, your index.html file has a link pointing to a location where the manifest.json file does not exist.

index.html:

<head>
  <!-- This link causes the browser to look for the manifest file -->
  <link rel="manifest" href="manifest.json" />
</head>
note

The path manifest.json is relative to the index.html file. This means the browser expects to find manifest.json in the same directory as the HTML file.

The solution is to ensure your project's file structure matches the path in the href. The simplest structure is to place both files in the same public-facing directory.

Correct File Structure:

/public/
  ├── index.html
  └── manifest.json

Correct link tag:

<!-- This is a relative path to the same directory -->
<link rel="manifest" href="manifest.json" />

<!-- Or, a root-relative path if your server is configured for it -->
<link rel="manifest" href="/manifest.json" />

Solution 2 (For Create React App): Use %PUBLIC_URL%​

In projects created with Create React App (CRA), you should always use the %PUBLIC_URL% public environment variable to reference files in your public folder.

For example, hardcoding the path in a React app can lead to incorrect paths after the project is built.

<!-- Problematic in a CRA project -->
<link rel="manifest" href="manifest.json" />

The solutions uses %PUBLIC_URL% to ensure that the path will be correctly resolved during the build process, no matter how your app is deployed.

public/index.html:

<head>
  <!-- This is the correct way for Create React App -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
note

This will be automatically transformed into the correct path (e.g., ./manifest.json) in the final build/index.html file.

Solution 3: Ensure the manifest.json File is Valid​

In rare cases, the path is correct, but the manifest.json file itself contains a syntax error.

For example, your JSON might have a trailing comma, use single quotes, or have unquoted keys.

// Problem: This JSON is invalid because of the trailing comma after the last icon.
{
  "short_name": "My App",
  "name": "My Application",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64",
      "type": "image/x-icon"
    },  // <--- Trailing comma makes this invalid!
  ]
}

The solution is to validate your JSON. You can copy and paste the contents of your manifest.json file into an online tool like JSONLint to find and fix any syntax errors.

A manifest.json file is part of the Progressive Web App (PWA) standard. It's used to define how your app should behave when "installed" on a user's device (e.g., its name, icon, and start URL).

If you are not building a PWA and do not intend to use these features, the simplest solution to the error is to remove the <link> tag entirely from your index.html file.

<head>
  <!-- If you don't need a manifest, simply delete this line -->
  <link rel="manifest" href="manifest.json" />
</head>

Conclusion​

The "Manifest: Line: 1, column: 1, Syntax error" almost always points to a problem with the file path, not the file's content.

To solve it, follow these steps:

  1. Check the Network tab in your browser's dev tools to see if the manifest.json request is returning a 404 error.
  2. If it is, correct the href path in your index.html file. For Create React App, this means using %PUBLIC_URL%/manifest.json.
  3. If the file is being found (status 200) but the error persists, validate the content of your manifest.json file for syntax errors.
  4. Finally, if you do not need PWA features, you can safely remove the <link rel="manifest"> tag altogether.

Table of Contents