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

The iPad screen displays the image in a rotated position while it remains

Recently, I developed a mini test website that enables users to upload pictures and immediately see them without navigating back to the server. It seemed quite simple at first. $('input').on('change', function () { var file = this. ...

javascripthtmlcssipadsafari

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

`Javascript framework suggests ajax navigation as the preferred method`

What is the best way to handle ajax navigation using jQuery? I have recently experimented with a simple jQuery ajax code to implement ajax-based navigation for all the links on a webpage. $('a').click(function(e){ e.preventDefault(); ...

javascriptjqueryhtmlajax

Dealing with error management in Transfer-Encoding chunked HTTP requests using express and axios

My current challenge involves fetching a large amount of data from a database in JavaScript using streaming to avoid loading all the data into memory at once. I am utilizing express as my server and a nodeJS client that retrieves the data using Axios. Whil ...

javascriptexpresserror-handlingaxioschunked-encoding

Add another condition to the current JavaScript rule

http://jsfiddle.net/e8B9j/2/ HTML <div class="box" style="width:700px">This is a sentence</div> <div class="box" style="width:600px">This is a sentence</div> <div class="box" style="width:500px">This is a sentence</div> ...

javascriptjquery

Tips for downloading a file using a Django function triggered by JavaScript instead of redirecting to the URL

Managing a page with multiple buttons that trigger various functions, such as sending an SMS (via API), emailing a file, or downloading a PDF. The button actions are powered by Ajax requests through JavaScript instead of using forms. I initially used Java ...

javascriptpythonajaxdjango

Continuous loop of Vue countdown timer

Hey there! I'm currently working on implementing a countdown timer, but I keep encountering a console error that says 'You may have an infinite update loop in a component render function.' It seems like something needs to be adjusted. expor ...

javascriptvue.jscountdown

What is the best way to ensure that my image completely occupies the div?

I am facing a challenge in creating a hero image that would completely fill the div on my webpage. Despite setting the width and height to 100%, the image seems to only occupy half of the space. Check out the CSS and HTML code snippet here. div.hero{ ...

javascripthtmlcss

VueJS search filter issue: 'search' property is not defined

Currently, I am in the process of developing an application that will consume JSON data and display it with a search filter feature, among other functionalities. I have attempted to create the necessary function for this task, however, it has not been suc ...

jsonvue.jssearchfilteraxios

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

javascriptjqueryhtmlcsshover

Exploring ReactJS: Combining JSON data with HTML elements

Recently, I started learning ReactJS. As I'm iterating through JSON data, I realized I need to incorporate some links into it. This is how my JSON data is structured: "text": ["For more information on the functionalities of the platform and services ...

htmljsonreactjs

Upon hitting submit, the form remains unresponsive

I have been developing a permissions system for my NodeJS project (Using the SailsJS MVC) and encountered an issue. After resolving my initial error as detailed here, I am now facing a problem where the form is unresponsive. It neither shows an error in th ...

javascripthtmlangularjsnode.jssails.js

Exploring the realm of unit testing in the NestJS CQRS architecture journey

We're currently working on writing unit tests using Jest for our application and are facing difficulties in testing sagas. Specifically, we're having trouble testing the saga itself. During our unit testing process, we've encountered an iss ...

javascriptunit-testingjestjsnestjssaga

Accessing data outside of the scope when looping through items in Angular forEach

I am currently working on retrieving the Game ID generated by the APIService.postData method for the game. The goal is to utilize this Game ID within the Angular foreach loops to maintain foreign key constraints on the RESTful side. Any advice on extracti ...

javascriptangularjs

Developing a Jquery solution for creating radio buttons layout

Looking to create a radio button functionality within different groups using multiple select. For Group A: If the user selects A1, then it should automatically deselect A2 and A3. If the user selects A2, then it should automatically deselect A1 and A3. I ...

javascriptjqueryhtmlmultiple-select

Adjust size of item within grid component in VueJS

I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images). https://i.stack.imgur.com/q4MKZ.png This is my current grid setup, and I would like the ...

javascripthtmlcssvue.jsgrid

The optimal placement for the business logic of a Chrome extension

As I dive into building my inaugural Chrome extension, a pressing inquiry arises regarding the optimal placement of the main logic and API calls. Given that I utilize React for the popup interface, one potential approach is housing all of the logic within ...

reactjsgoogle-chrome-extensionbusiness-logic

leveraging a callback function alongside the useState hook

I'm facing an issue with the change() function. My goal is to call the filteredData() function after the setState operation is completed. Typically, I would use a callback function for this task, but useState doesn't support callbacks. Using useE ...

javascriptreactjsreact-hooks

Securely transmit data using a JQuery modal dialog form with HTTPS encryption

I currently have a functional modal login dialog. The only issue I'm facing is that when the original page is loaded through http, I still need to securely pass credentials to the server via https. Ideally, I would like to achieve this with minimal mo ...

javascriptjqueryajaxjsonp

Guide on how to validate react-multiselect with the use of Yup validation schema

If the multiselect field is empty, the validation message 'Product is required' is not being displayed. How can I validate this field? Here is the validation schema: validationSchema={ Yup.object().shape({ productID: Yup.string().requi ...

javascriptreactjsreact-hooksmaterial-ui