Parcel: Parcel loads .json/.js file as .html

[MLK97]

🐛 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]

This usually happens because you request some file localhost:1234/fonts/my_font.json which wasn't copied into the dist folder by Parcel. Because of the SPA-style dev-server, there is no 404 error but instead the index html file is served.

You probably want to do

import fontJSON from '../fonts/my_font.json'; // this is a url, and Parcel will copy the file

loader.load(fontJSON, ...

[MLK97]

This also didn't work correctly but dragging the json manually into the dist folder worked. However this seems kind of an unwanted behavior.
Your solution transformed the json into an object. However I could be wrong, since my knowledge of Objects vs JSON isn't very deep

[mischnic]

Your solution transformed the json into an object.

Ah, you're right, I forgot about that. Looks like the only solution is somehow copying it manually...

[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.

[MLK97]

Thank you will do that.
Could this maybe be added to the documentation?
If wished, I could do this, since it doesn't seem to be much, but it seems to be a very valuable piece of information.

[101arrowz]

Parcel 1 isn't updated anymore, not even docs, so that may not be possible... We can add some information about JSON and third-party frameworks that expect URLs such as Three.js to Parcel 2 docs if you'd like.

[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...

[MLK97]

We can add some information about JSON and third-party frameworks that expect URLs such as Three.js to Parcel 2 docs if you'd like.
That would be great

[mischnic]

Alright, you can follow the mentioned issue for that.