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
Linking the name properly in index.html as
Editing the package.json of the react app as
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.
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
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.