Manifest.json error in line 1 in react js

Question

I am very frustrated with this thing. I am trying to host my mern app on Heroku so I was trying to check that the server (backend) is working properly. Then, I faced the issue

Manifest: Line: 1, column: 1, Syntax error.

I researched many websites try many solutions but can't find one.

My manifest.json file looks like this:

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

and my index.html is look like this :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="/logo/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hubballi&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
  <meta name="description" content="Web site created for housedeck-home-services" />
  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
  <link rel="manifest" href="manifest.json" />
  <title>Home Services by HouseDeck</title>
</head>
<body>
  <div id="app"></div>
</body>
<script>
</script>
</html>

The things I already tried are :

editing start_url in manifest.json as
- start_url:".",
- start_url:"/",
- start_url:"./",
- start_url:"*",
- start_url:"./index.html",
Linking the name properly in index.html as
- link rel="manifest" href="manifest.json" />
- link rel="manifest" href="/manifest.json" />
- link rel="manifest" href="./manifest.json" />
- link rel="manifest" href="manifest.webmanifest" />
- link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
Editing the package.json of the react app as
- homepage:".",
- homepage:"/",
- homepage:"./",
- homepage:"https://localhost:5000/",
- homepage:"",
- homepage:" ",
- proxy:"https://locahost:1000/",

But nothing seems to work with me. I already enabled the javascript in my browser and am using webpack at react@16. Last time it works automatically i used But when I tried it today again it doesn't seem to work. please help me I am very frustrated with this. I also cannot get the favicon that I linked to the index.html. It says 304 for localhost,favicon.ico and manifest.json.

I thought the problem was in the build or the public folder but I also tried localhost and firebase hosting and they are working properly but the problem only arises when I link the client with the server for trying hosting.

here is my index.js

app.get("*", (req, res) => {
     res.sendFile(path.join(__dirname ,'/FRONTEND/public/index.html'));
})

Help me with this guys. I think I will be stuck here forever.

Did you try <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />? (Assuming your manifest is in the "public" folder). — Andy
– Andy, Commented May 28, 2022 at 13:21

Yash-Sharma2002 · Accepted Answer · 2022-06-01 08:00:32Z

Since no one was answering the question I found the answer myself.

The answer is simple read the steps to remove it carefully

There is no need to remove the %PUBLIC_URL% in the public/index.html but if you want to them just do link rel="manifest" href="/manifest.json"
On the server-side in index.js add this

app.use(express.static(path.join(__dirname,'client','build'))

This line specifies that if your browser wants to search any files related to the website it will search it in this directory (your_server/client/build). Here it will find the manifest.json which removes the Manifest: Line: 1, column: 1, Syntax error.

Then in the index.js add this

app.get("/*", (req, res) => { res.sendFile(path.join(__dirname ,'/FRONTEND/public/index.html')); })

This line means - when any URL is searched in your website file it will always redirect you to index.html

There is no need to change anything in manifest.json. But if you remove the logos provided by the react template then you have to remove those lines in manifest.json too. Also, I want to state that manifest.json and manifest.webmanifest both work the same.

All the above steps remove the error and removing the linking of the manifest.json will not work You can read about that in these posts:-

post tells you about the manifest. json

tells you about the deployment steps

All this worked for me I spent a week to find the solution.

PestoP · Accepted Answer · 2024-02-23 07:30:40Z

2

Just in case someone fall into the same issue: I stupidly forgot to filter the manifest file from the middleware (using nextjs):

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|manifest).*)'],
}

answered Feb 23, 2024 at 7:30

PestoP

3093 silver badges14 bronze badges

Collectives™ on Stack Overflow

Manifest.json error in line 1 in react js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related