MIME Type Error When Importing GLB File on Apache Server

Questions
1

I use the following line to import a GLB file:

import chair from “…/src/assets/Chair.glb”;

I run it on an Apache server.

On Microsoft Edge, I get this error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.

I don’t get the error if I run it with Node JS. Can Babylon JS run on Apache server?

2

this has nothing to do with babylon, this is related to your server’s configuration. Set the mime type of glb files in your config and you are good to go.

3

oh, and also - i would assume that you are using some form of a bundler to support that. you don’t import binary files using the import/export api, only js files.

4

I added glb mime type into the server config file and I got this error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “model/gltf-binary”. Strict MIME type checking is enforced for module scripts per HTML spec.

We can use the ( import chair from “…/src/assets/Chair.glb”; ) line to import a glb file in Node JS environment, but we cannot use it for Apache server?

How to import binary files with Apache server?

5

why are you importing the file and not loading it using the babylon scene loader?

6

I tried the following code:

import “…/src/framework_packages/babylon.js”;
import “…/src/framework_packages/babylonjs.loaders.min.js”;

const canvas = document.getElementById(“renderCanvas”);
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

BABYLON.SceneLoader.ImportMesh(“”, “src/assets/”, “Chair.glb”, scene, function (newMeshes) {
});

I got this error:

Unable to load from src/assets/Chair.glb: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse

7

This should actually work, but it might be an issue when using module-type script (which i assume you are using here). Since you are using the UMD variant, have you tried adding the two imported js files to the HTML’s head (or body)?

8

I just tried adding the two imported js files into the HTML’s head:

<head>
    <script src="src/framework_packages/babylon.js"></script>
    <script src="src/framework_packages/babylonjs.loaders.min.js"></script>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <script type="module" src="src/index.js"></script>
</body>

But I still got the same error message. Are glb and env files only importable with Node JS?

9

no, of course not. I am pretty sure something in the environment is not configured correctly. If you want to share your setup, we might be able to understand what is wrong.
Can you share a project on github?

10

Could you please download the project from this Mega link?

To run it locally on Windows 11, I use WampServer 64-bit. Please let me know if you encounter any issue. Thanks

11

an .env file is not a mesh to be imported (as you are trying to do in your source). When loading a glb it works as expected. have you read the docs about the env files? Using An HDR Environment For PBR | Babylon.js Documentation (babylonjs.com)

12

Thank you for the solution. I thought I could just use the code that works in Node JS for Apache.

13

I am not sure you could load a .env like that in node.js, but in general those are two different execution contexts. Web is not entirely node.js. Glad we managed to find the issue.

14

I tried to use the import lines of code for env file and it worked. I guess Babylon JS code for Node JS is generally simpler than the one for Apache