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.
1 answers
solution1
0 2021-04-18 03:14:04
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.