SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON

[ghost]

Hello all!

Recently I've been trying to use data.json file in my main.js code, however the console throws an error: SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON. Seems like, there is an issue in a way parcel handles JSON. I tried the same code without parcel everything worked fine.

I checked the content-type value under the promise header and it was set to text/html; Charset= utf-8. So, apparently parcel transforms JSON to text/html instead of Application/json.

I added an .htaccess configuration file to the directory where my JSON file is located with the following code:

AddType application/json .json.

However, it did not help. The status code of a promise is 200. So, there is no mistake in a fetch function:

fetch("./Data/people.json")
  .then((response) => response.json())
  .then((data) => console.log(data.jessica));

If somebody has ever encountered to the same problem, would very much appreciate the help!

I also include my package.json code:

{
  "name": "src",
  "browserslist": "last 10 versions, > 0.5%, not dead",
  "scripts": {
    "clean": "rm -rf dist/ .parcel-cache .cache",
    "open": "parcel src/*.html --open",
    "start": " parcel src/*.html",
    "build": "rm -rf dist/ && rm -rf .cache/ && rm -rf .parcel-cache/ && parcel build src/*.html --no-source-maps"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.8.3",
    "browserslist": "^4.21.5",
    "parcel": "^2.8.3",
    "parcel-bundler": "^1.12.5",
    "particlesjs": "^2.2.3"
  },
  "@parcel/transformer-css": {
    "drafts": {
      "nesting": true,
      "customMedia": true
    },
    "pseudoClasses": {
      "focusVisible": "focus-visible"
    }
  },
  "dependencies": {
    "overlayscrollbars": "^2.1.1"
  },
  "version": "1.0.0",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

[mischnic]

Parcel doesn't know that you're using that json file, so it's not copied into the dist folder. Then the dev server responds with the index.html file.

You could either do import("./Data/people.json").then((data) => console.log(data.default.jessica)) instead, or keep the current code and use https://github.com/elwin013/parcel-reporter-static-files-copy to copy the file.

(If this were a PNG file or some other asset, you could use https://parceljs.org/languages/javascript/#url-dependencies . But that doesn't work for JSON right now.)