Manifest: Line: 1, column: 1, Syntax error; React.js: screen is blank or white while going to open it in browser by typing npm start

user_13824261 0
Viewed 5256

I have following error getting on cosole...

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Failed to load resource: the server responded with a status of 400 (Bad Request)

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

Full of my browser screen is white and no data shwing

Following is my manifest.json file

{
  "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"
}

Here is the link tag on my indext.html file

<link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />

I have done lists of work but problem still remainung...

  1. delete node_modules and package.lock.json file and run npm install in my terminal

  2. add crossorigin="use-credentials" into link tag on indext.html of public folder

  3. edited follwing object on manifest.json

    { "start_url": "./", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }

but nothing is solved yet....

google-chrome
2 Answers

Sometimes this type of error could come in terms of broken files or dependencies. In that case, the best option I do think so far is to restart your project with newly installing react and copy all those files into your new project from the past one.

And let's try and see what's gonna happen;

  npx  i create-react-app "create-new-one"

then

 cd "create-new-one"

finally, copy file and folders as in order or the way of structure in a way in new created one and have a look for starting

npm start

Now all the issues relating to manifest.json is to go away

Note: in my case, I did the same way just said and consequences, get removed out of that

user_138242610

You can put manifest.json into public folder – the URL will be just

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

This location is preferred over static (or any other folder) since Next.js 9.1, when public folder support was introduced.

In my case this solved the error, here is the link where i have found this solution https://github.com/vercel/next.js/issues/9621

user_163377780
Related