Encountering the Error of Unexpected Character < in JSON at Position 31 While Using Visual Studio Code and Online Integrated

I've recently resumed work on my website and encountered an error that seems to be related to the package.json file. Surprisingly, I haven't made any edits to it. Just a heads-up, my project is built using react.

Here's the error message I receive when trying to run my code with npm start or on codesandbox

Take a look at my package.json configuration below:

{
  "name": "profile-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "font-awesome": "^4.7.0",
    "react": "^18.0.0",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^18.0.0",
    "react-icons": "^4.3.1",
    "react-router-dom": "6",
    "react-scripts": "5.0.1",
    "sass": "^1.51.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer №1

It seems like the error you're encountering is a common one when JSON is expected but HTML is received instead. This can happen with incorrect API requests, PHP errors returning HTML messages, and more.

If the issue suddenly appeared without any changes on your end, then something must have altered in your project. Typically, browsers maintain backwards compatibility, so the problem likely lies within your setup. Can you confirm that you haven't made any modifications since it was functioning properly? (Even minor updates count.)

Follow these steps and report back on the results:

  1. Have you truly not adjusted anything since the previous working state?
  2. Check for any error notifications in the browser console.
  3. Does your project incorporate other elements? If so, what do the components mentioned in the error message contain?
  4. Considering this article, is there a base tag in the head of your index.html or similar file? For example,
    <base href="/" />

You may also find this link relevant: Webpack Issue #2541.

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 could be causing errors with my kick command?

Hey everyone, I'm currently working on implementing some admin commands. Right now, I'm focusing on creating a kick command, but I keep running into errors. Making any changes seems to cause issues in other parts of the code. This is where I&apo ...

Struggling to execute an AJAX request in JavaScript

I am a beginner in .Net development and I am trying to make a call to the client's server. When I test the code using POSTMAN, it works fine. However, when I use the same code/headers in JavaScript, I do not get the desired result. Here is the code I ...

Issue encountered during the page rendering process using Angular 5

Currently I am working on a project with Angular 5 and I have encountered an issue while calling an API in my project. This is the error message that I am receiving: Error: StaticInjectorError(AppModule)[Router -> ApplicationRef]: StaticInjectorErr ...

What are the functioning principles of older ajax file uploading frameworks (pre-html5)?

Traditional HTML includes an input element with a file type option. Tools are available that enable asynchronous file uploads with progress tracking. From what I gather, this is achieved by splitting the file into chunks and sending multiple requests wit ...

Unexpected error 500 (Internal Server Error) occurred due to BadMethodCallException

Using Vue 2.0 and Laravel 5.4, I am working on creating a matching system that includes a dynamic Vue component. For example, when someone likes another person, it should immediately show that the like has been sent or if the like is mutual, it should indi ...

Browserify - combine external modules into a single bundle

I am a complete beginner in the world of browserify. I recently discovered this interesting module called peer-file, which allows for file transfer between two browsers. After reading the Usage section in its readme, I realized I needed to include the scri ...

Tips for interpreting JSON content within a C# HttpPost function

I need assistance with extracting data from a JSON body and then displaying it in an HttpPost method using C#. The JSON payload includes: { "name": "John", "age": "20" } [HttpPost] public async Task<IAct ...

A syntax error was encountered while trying to execute jQuery due to

I am continuously encountering an error regarding an illegal character in Firebug $('#service_chk').click(function () { var $this = $(this); if ($this.is(':checked')) { $('#service').css('display&apos ...

Seeking assistance with sending variables to a dialog in Angular 2

Currently facing an issue where I need to pass the URL id from the previous page visited by a user to a service that can be referenced in a dialog. issuer.service.ts import { Injectable, EventEmitter } from '@angular/core'; import { Observabl ...

Preventing Users from Uploading Anything Other than PDFs with Vue

I am currently working with Bootstrap-Vue and Vue2. Utilizing the Form File Input, I want to enable users to upload files, but specifically in PDF format. To achieve this, I have included accept="application/pdf": <b-form-file v-model=&quo ...

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...

Using Vue.js to apply highlighting to a new object within a JavaScript array in an HTML document

I have a table displaying a list of items, and I want to highlight any new item added to the collection for 1 second to draw the user's attention. How can I modify the background color of the newly added object in a .vue file? Below is the code snipp ...

Transmitting encoded bytes data via JSON

Currently, I am developing a Python RESTful API and facing the challenge of transmitting bytes-encoded data (specifically encrypted data using a public RSA key from the rsa package) over the network in JSON format. This is what the scenario looks like: & ...

Look through the contents of each child within a div to locate specific text, then conceal any that do not include it

I want to dynamically hide divs that do not contain the text I specify. Here is the code I have tried: var $searchBox = $('#search-weeazer'); $searchBox.on('input', function() { var scope = this; var $userDivs = $('.infor ...

identifying HTTP requests originating from an embedded iframe

I have a unique scenario where there is an iframe on my page that calls a URL from a different domain. Occasionally, this URL will tunnel to a different URL than the one I specified. Unfortunately, due to cross-domain restrictions, I am unable to view the ...

State does not refresh when onClick event occurs

Hey there, I've encountered an issue with my recipe project. Within this particular section, users have the capability to add their recipe steps. By clicking on the plus button, a textarea is added for them to input a new step. Conversely, clicking on ...

JavaScript HTML Object Manipulation and Templating System

I am searching for a JavaScript library that is capable of performing the following: var items = [1, 2]; var html = div( ul({ id: "some-id", class: "some-class" })(items.each(function(item) { return li(item); })); html == ...

Can someone explain the purpose of $event in Angular Material and whether it is necessary when using UI Router?

As I explore this unanswered question, I can't help but ponder if discovering the answer is truly important. My search for information on $event has led me through Angular Material and material docs, yet no mention of it exists. The only reference I f ...

Directive Template with Dynamic Fields (AngularJS)

I am interested in creating a custom directive that can bind to any object, allowing me to specify the field used in the template for display. Previously, I was limited to using {{item.Name}}, but now I want the flexibility to define the display field. Cu ...

Setting the y-axis range in d3.js and nvd3.js: A complete guide

I'm attempting to define the y-axis range of the chart to be between 1 and 100. After reviewing the API documentation, I came across a potential solution involving axis.tickValues which can be found here: https://github.com/mbostock/d3/wiki/SVG-Axes# ...