load method in THREE.FileLoader only gets the content of index.html

I’ve set up a very small browser project using create-js-app. I try to load a file called test.txt located in my src directory.

Following is the content of my main.js:

import * as THREE from 'three';

const loader = new THREE.FileLoader();

loader.load(
    "test.txt",
    function (data) {
      console.log(data);
    },
    function (xhr) {
      console.log(
        "Loading file : " +
          (xhr.loaded / xhr.total) * 100 +
          "% loaded"
      );
    },
    function (err) {
      console.error(err);
    }
  );

When running my site in Chrome, I get the content of my index.html file instead of test.txt. I spent some time trying to understand this with no success.

I get this result no matter which file path I specify as first argument of loader.load(), I can even specify a file that is not existing.

Has anybody already faced this issue?

Thanks a lot.

Edit: I’m using Parcel as the bundler.

Answer

This issue comes down to internal details of create-js-app, and different web applications may host static resources (i.e. images and other assets that are not compiled source code) in different ways. But generally speaking, the src/ directory is not hosted/deployed/served on the website. If your application has the structure shown here then you probably want to put the .txt file into the public/ directory instead.

Requesting any file that cannot be found at the given URL might be giving you the index page instead, depending on how your site is set up by create-js-app.