Parcel loads .json/.js file as .html

🐛 bug report

Parcel loads files with the wrong MIME-type. In this issue I’ll focus on a specific case where .json gets loaded as .html

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "my-website",
  "version": "1.0.0",
  "description": "Website",
  "main": "app.js",
  "scripts": {
    "prod": "parcel build index.html",
    "dev": "parcel index.html",
    "dev-clear": "rm -rf .cache && parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "./",
  "dependencies": {
    "@barba/core": "^2.9.7",
    "gsap": "^3.5.1",
    "jquery": "^3.5.1",
    "locomotive-scroll": "^4.0.4"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }
}

🤔 Expected Behavior

It should load the files as the format they actually have. The same issue is happening with .js files that are loaded as .html and thus cause errors

😯 Current Behavior

There should be no error at all Instead this error occurs:

Uncaught SyntaxError: JSON.parse: 
unexpected non-whitespace character after JSON data at line 1 column 3 of the JSON data

Under the network tab one can see the problem clearly

Both files, the json and javascript file are getting imported as html files.

💻 Code Sample

This is an already rather larger project so I tried to compress the code sample to the most important part, that I think is crucial for understanding

//THREE.js
 const loader = new THREE.FontLoader();
 loader.load('../fonts/my_font.json', function(font) {
   ...
}

This is what causes the main error, that is discussed in this issue. I don’t really know what I can provide for the second importing/loading issue of the contact.js here, as this just seems to be a loading issue, however if there is something I can add please let me know.

🌍 Your Environment

Software	Version(s)
Parcel	1.12.4
Node	12.16.2
npm/Yarn	6.14.9
Operating System	Windows 10 - 64

[mischnic]

not even docs, so that may not be possible

(Because ~Zeit~ Vercel shut down ~Now 1~ Vercel version 1 and we can’t redeploy the page anymore without changing the backend.)

Parcel 2

Related: https://github.com/parcel-bundler/website/issues/769.

We could probably also mention this here: https://v2.parceljs.org/languages/babel/ (what importing json does). But I’m not sure if this is the place where you would search…

[101arrowz]

If you’ll always be loading the font, it’s definitely better to inline the JSON because the contents will be sent over GZIPped when you inline, but XHR can’t accept GZIP when you load manually. Plus, one fewer network request. As in, replace the function with:

import fontJSON from '../fonts/my_font.json';

const font = loader.parse(fontJSON);

Switch to Parcel 2 for URL support when you have massive JSON that isn’t always loaded.