Loading module from was blocked because of a disallowed MIME type (“”)

Question

I am going through a three.js example and when I use import within a javascript module I get the error: Loading module from “http://localhost:8000/build/three.module.js” was blocked because of a disallowed MIME type (“”).

When I import traditionally using a script tag I do not get this error. Here is my code:

Commented out lines will render a rotating cube

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script type="module">

            import * as THREE from '/build/three.module.js';
            // const scene = new THREE.Scene();
            // const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            // const renderer = new THREE.WebGLRenderer();
            // renderer.setSize( window.innerWidth, window.innerHeight );
            // document.body.appendChild( renderer.domElement );

            // const geometry = new THREE.BoxGeometry();
            // const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            // const cube = new THREE.Mesh( geometry, material );
            // scene.add( cube );

            // camera.position.z = 5;

            // const animate = function () {
            //  requestAnimationFrame( animate );

            //  cube.rotation.x += 0.01;
            //  cube.rotation.y += 0.01;

            //  renderer.render( scene, camera );
            // };

            // animate();
        </script>
    </body>
</html>

In contrast, this works fine:

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="build/three.js"></script>
        <script>
        // ...
        </script>
    </body>
</html>

My file structure is:

|_index.html
|_ ...
|_build/
    |_ three.module.js
    |_ three.js
    |_ ...

Why do i get the MIME-type error when using import in a module? I would like to be able to use this import method because all the other three.js examples seem to do this in JS modules.

With Python 2.7, I am running `python -m SimpleHTTPServer` in the root directory — Null Salad, Jan 03 '21 at 07:33
Did you try to load with real relative path with a `.` before path `'./build/three.module.js';? ` — tmhao2005, Jan 03 '21 at 07:38
You need to fix that server to send the proper content type header for your javascript files. See e.g. https://ericduran.io/2017/10/09/js-modules-python-mime-type/ — Bergi, Jan 03 '21 at 07:40
@Bergi But `.js` is already a known mime-type according to the link you provided. — wuerfelfreak, Jan 03 '21 at 08:12
ack the `.` before the path seemed to do it... so simple, thanks! — Null Salad, Jan 04 '21 at 02:25

Don Smith · Answer 1 · 2021-04-18T03:28:57.407

2

I get the same error message Loading module from “http://localhost:8080/build/three.module.js” was blocked because of a disallowed MIME type (“”). when I start my http server in the three_js/examples/ folder. Starting the http-server in three_js/ fixes the problem. The reason is that the import statement for me was import * as THREE from '../build/three.module.js';. I'm not sure this solves your exact problem, but it seems closely related.

edited Apr 18 '21 at 03:28

answered Apr 18 '21 at 03:14

Don Smith

473
4
10

This was a lifesaver for me, thank you. – kevlar Oct 12 '22 at 16:03

Loading module from was blocked because of a disallowed MIME type (“”)

1 Answers1