Manifest: Line: 1, column: 1, Syntax error [Solved]

# Table of Contents

# Manifest: Line: 1, column: 1, Syntax error [Solved]

The error "Manifest: Line: 1, column: 1, Syntax error" occurs for multiple reasons:

Specifying an incorrect path to your manifest.json file in a link tag.
Your manifest.json file doesn't exist.
Incorrectly setting the href attribute of a link in a React.js application.
Fetching a manifest that requires credentials without setting crossorigin="use-credentials".

manifest line 1 column 1 syntax error

To solve the error, make sure to specify the correct path to your manifest.json file or remove the <link rel="manifest" /> tag from your index.html file.

Open your index.html file and look at the <link rel="manifest" /> tag in the head section.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <!-- 👇️ look at href attribute-->
    <link rel="manifest" href="manifest.json" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

If you use React.js, your index.html file will be located in the public/ directory.

index html located in public directory

The first thing you should do is make sure that your manifest.json file exists and identify its location.

If you don't have a manifest.json file, you can simply remove the <link rel="manifest" /> tag.

The href attribute of the link in the example above is set to manifest.json.

index.html

Copied!
<link rel="manifest" href="manifest.json" />

This assumes that there is a manifest.json file at the root level (right next to your index.html file).

shell

Copied!
my-project/
  └── index.html
  └── manifest.json

If your manifest.json file is located in a different directory, try to move it next to your index.html file and use the following relative path.

index.html

Copied!
<link rel="manifest" href="manifest.json" />

If the error persists, try to specify a leading forward slash / in the path.

index.html

Copied!
<link rel="manifest" href="/manifest.json" />

You can also try to use a prefix of ./ to specify a relative path.

index.html

Copied!
<link rel="manifest" href="./manifest.json" />

Your manifest.json file may look something similar to the following.

manifest.json

Copied!
{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

The file points to a bunch of favicons of different sizes.

The src paths in the example assume that the icons are located in the same directory as the manifest.json file.

# Set the `crossorigin` property to `use-credentials`

As noted in this section of the MDN docs, the use-credentials value must be used when fetching a manifest that requires credentials.

index.html

Copied!
<link rel="manifest" crossorigin="use-credentials" href="manifest.json" />

Make sure the crossorigin attribute is set to use-credentials as shown in the code sample.

This is necessary even if the file is from the same origin.

# Use the %PUBLIC_URL% environment variable if you use React.js

If you use React.js with Create React App, use the %PUBLIC_URL% environment variable when specifying the path to the manifest.json file.

Your index.html and manifest.json files should be located in your public/ directory, at the root of your project.

index html located in public directory

Set the href attribute to %PUBLIC_URL%/manifest.json.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <!-- 👇️ use the %PUBLIC_URL% environment variable -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  </head>
  <body>
    <noscript
      >You need to enable JavaScript to run this app.</noscript
    >
    <div id="root"></div>
  </body>
</html>

The %PUBLIC_URL% environment variable will be replaced with the URL of the public directory during the build.

You can only use the environment variable to reference files located inside the public directory.

Make sure your manifest.json file exists and is located in the public/ directory right next to your `index.html` file.

If you create a separate directory for your manifest.json file, you have to correct the path.

Here is an example.

shell

Copied!
public/
  └── icons/
    └── manifest.json
  └── index.html

The manifest.json file is located in an icons/ directory inside the public/ folder.

index.html

Copied!
<link rel="manifest" href="%PUBLIC_URL%/icons/manifest.json" />

The benefit of using the %PUBLIC_URL% environment variable is that it works correctly with both client-side routing and a non-root public URL.

This is not the case when using a path of /manifest.json or manifest.json.

If you run the npm run build command, you will see the files from your public/ folder inside the build/ folder in the root directory.

index and manifest in build directory

The href property of the link tag has been replaced in build/index.html.

build/index.html

Copied!
<link rel="manifest" href="./manifest.json"/>

The manifest.json file is located in the same folder as the index.html file, so a relative path of ./manifest.json is used.

# Remove the link rel="manifest" tag from your `index.html` file

If you don't need to load the manifest.json file or you can't figure out how to correctly set the href attribute, you can simply remove the link tag to get rid of the error.

Open your index.html file.
Look for a link tag that has its rel attribute set to manifest.
Remove the tag.

build/index.html

Copied!
<!-- 👇️ remove this tag -->
<link rel="manifest" href="manifest.json"/>

If you don't have a manifest.json file in your project and need a starter template, you can use this one from "Create React App".

manifest.json

Copied!
{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

The manifest specifies that there is a favicon.ico file in the same directory.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Manifest: Line: 1, column: 1, Syntax error [Solved]

# Table of Contents