The unexpected token was found in line 1 of the manifest icons code, but not in column 1

This query appears to have been long-standing on Stackflow, but none of the solutions posted seem to resolve it.

Even though the JSON validates correctly in validators, I continue to encounter the following error. Any idea what might be causing this issue?

Error: 

manifest icons Line 1 not , column: 1, Unexpected token.

    {
         "name": "slangoApp",
         "icons": [
          {
           "src": "\/android-icon-36x36.png",
           "sizes": "36x36",
           "type": "image\/png",
           "density": "0.75"
          },
          {
           "src": "\/android-icon-48x48.png",
           "sizes": "48x48",
           "type": "image\/png",
           "density": "1.0"
          },
          {
           "src": "\/android-icon-72x72.png",
           "sizes": "72x72",
           "type": "image\/png",
           "density": "1.5"
          },
          {
           "src": "\/android-icon-96x96.png",
           "sizes": "96x96",
           "type": "image\/png",
           "density": "2.0"
          },
          {
           "src": "\/android-icon-144x144.png",
           "sizes": "144x144",
           "type": "image\/png",
           "density": "3.0"
          },
          {
           "src": "\/android-icon-192x192.png",
           "sizes": "192x192",
           "type": "image\/png",
           "density": "4.0"
          }
         ]
        }
javascriptjsongoogle-chrome-extension

Answer №1

Your manifest.json file needs to be located in the same directory as your index.html file, not in any other directory. If you're using React, make sure you haven't mistakenly placed it in the src directory.

Answer №2

The reason behind this issue is that the browser is unable to recognize the MIME type of the manifest file, resulting in it being unable to locate the file. To resolve this, navigate to Chrome DevTools > Network > Headers > Content-Type and ensure that the content-type specified matches the actual file extension of the manifest (.json or .webmanifest).

If you are using ASP.NET, make sure to specify the file types in the web.config file:

<staticContent>
  <mimeMap fileExtension=".json" mimeType="application/json" />
  <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>

Answer №3

The "name": "slangoApp", should be updated to "name": "slangoapp", Ensure it is all in lowercase and without any spaces.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to identify when a particular character has been entered into the input field?

HTML <div class="form-group"><label class="col-md-4 control-label" for="s1">URL</label> <div class="col-md-4"><input id="url" name="url" type="text" ng-change="checkVal()" ng-model="url" placeholder="" class="for ...

javascriptangularjs

React encountered an unexpected end of JSON input while streaming JSON data

Currently, I am facing a challenge with streaming a large amount of data from a NodeJS server that retrieves the data from Mongo and forwards it to React. Due to the substantial volume of data involved, my approach has been to stream it directly from the s ...

javascriptnode.jsreactjsstream

Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Currently, I am in the process of developing a website that will serve as a presentation. My plan is to create a slideshow effect using JavaScript. While I have implemented some functions, I must admit that it is not very organized at the moment. The main ...

javascriptjqueryhtmlcss

Error in line 36: firebase.auth function is undefined

Snippet of index.html code <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" ...

javascripthtmlfirebasefirebase-authentication

What is the best way to preserve the allocated space in the DOM while utilizing CSS display:none?

I have explored the functionalities of display:none and visibility:hidden. However, I need to utilize display:none for a specific reason while still preserving the element's allocated space in the DOM to prevent any impact on adjacent elements. Is thi ...

javascriptjquerycss

Troubleshooting: jQuery's append function does not seem to be functioning properly when trying

I am attempting to include a stylesheet in the head section of my page, but it seems that using 'append' is not getting the job done. Is there an alternative approach I should consider? Here is the code snippet: $('head').append(&apos ...

javascriptjqueryappend

Using the Table-multiple-sort feature in boostrap-table is not functioning properly when there are multiple tables present on a single page

I have implemented bootstrap-table along with the extension table-multiple-sort. The issue I am facing is when I include two tables on a single page (with the second table within a modal window), the multisort feature does not seem to work on the second ta ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-table

"Attempting to send JSON data through Express resulted in an error due to

I have encountered an issue while trying to send JSON data to a node server using Express. Despite the fact that the JSON object is valid, the server keeps throwing an error stating 'unexpected token i'. Client Side Code: $.ajax({ contentTy ...

jsonnode.jsexpress

How can dependencies be conditionally imported in a module that is shared between React (Next.js) and React Native?

I am looking to create a shared Typescript module that can be used in both a React (Next.js) web app and React Native mobile apps. This module will be responsible for managing communication with the backend (Firebase) and handling state management using t ...

javascriptreactjsfirebasereact-nativenext.js

What is the best way to set a fixed width for my HTML elements?

I am facing an issue with my user registration form where error messages are causing all elements to become wider when they fail validation. I need help in preventing this widening effect. How can I achieve that? The expansion seems to be triggered by the ...

javascripthtmltypescriptmaterial-ui

Passing the $scope variable between functions

Here is the function in my angular controller: $scope.selectinteresteduser = function(Id){ $scope.selecteduserid = Id; } $scope.sendMessageToEmployeer = function($scope.selecteduserid) { alert($scope.selecteduserid); } I am looking for a way to pa ...

javascriptangularjs

display the JSON response using jQuery

Having an issue with printing the response JSON using a message alert. Here is the script I am using: $.ajax({ headers: { "Accept" : "application/json", "Content-Type": "application/json" }, url: "http:/ ...

phpjqueryjsonajax

Transfer data in scripts to dynamically load Ajax pages

Is there a way to send variables or parameters from the original page to a script tag on another page that is loaded using jQuery Ajax? Here are the scripts: Page 1 <script> $(function(){ $('#button').click(function(){ $.ajax({ type:"P ...

javascriptjqueryajaxparameters

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

What is the best way to retrieve the final entry from a JSON file while using json server with Angular?

I'm currently working with a JSON file where I am making post requests followed by get requests. My goal is to retrieve the latest record in each get request after submitting a post request. For example: [ { "id": 1, "title&qu ...

jsonangularpostjson-server

Utilize JSON data as a source for autocomplete in JQuery

I have encountered an issue while using the autocomplete widget of JQuery with JSON to parse database information. Despite searching for a solution, I have not been able to resolve it. Here is my PHP file with JSON parsing: The error displayed in the brow ...

ajaxjsonjqueryautocomplete

Content that is set to a fixed position within a hidden element will remain at the top

translate3d(0%, 0px, 0px); is causing issues with my position fixed element. In my demo, you'll notice that clicking the button should open up the content just fine, but it is supposed to stay fixed at the top in a position fixed. Therefore, when scr ...

javascriptjqueryhtmlcss

Utilize node.js on your local machine and leverage gulp to monitor any modifications

I recently copied a repository from https://github.com/willianjusten/bootstrap-boilerplate and followed these steps. git clone git://github.com/willianjusten/bootstrap-boilerplate.git new_project cd bootstrap-boilerplate npm install gulp The gulp comman ...

javascriptnode.jsnpmgulp

Navigating router queries within Nuxt: A step-by-step guide

One of the challenges I am facing is passing value parameters in my URL with the mounted function looking like this: mounted () { this.$router.push({ path: '/activatewithphone', query: { serial: this.$route.params.serial, machin ...

javascriptvue.jsnuxt.js

What is the best way to revert my useState back to its original state once the filtered list has been displayed?

I am struggling to reset my projectList to its initial state so that the filterProjects function can search through the entire projectList instead of the already filtered ones. I have a resetProjects function, but I'm unsure where to call it in order ...

javascriptreactjsarraysreact-hooks