javascript - Manifest.json error in line 1 in react js

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="+Script:wght@700&display=swap" rel="stylesheet">
  <link href=";display=swap" rel="stylesheet">
  <link href=";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.

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./css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis./css2?family=Hubballi&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis./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/",

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.

Share Improve this question asked May 28, 2022 at 13:09 Yash-Sharma2002 1391 silver badge12 bronze badges

Did you try <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />? (Assuming your manifest is in the "public" folder). – Andy Commented May 28, 2022 at 13:21
1 Yes and it says public url not defined cannot connect – Yash-Sharma2002 Commented May 28, 2022 at 13:38

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

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.

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).*)'],
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Manifest.json error in line 1 in react js - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)