admin 管理员组文章数量: 1086019
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.
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.
- What http server are you running to serve these files? – Bergi Commented Jan 3, 2021 at 7:28
-
With Python 2.7, I am running
python -m SimpleHTTPServerin the root directory – Null Salad Commented Jan 3, 2021 at 7:33 -
1
Did you try to load with real relative path with a
.before path'./build/three.module.js';?– tmhao2005 Commented Jan 3, 2021 at 7:38 - You need to fix that server to send the proper content type header for your javascript files. See e.g. ericduran.io/2017/10/09/js-modules-python-mime-type – Bergi Commented Jan 3, 2021 at 7:40
-
1
@Bergi But
.jsis already a known mime-type according to the link you provided. – wuerfelfreak Commented Jan 3, 2021 at 8:12
1 Answer
Reset to default 3I 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.
本文标签： javascriptLoading module from was blocked because of a disallowed MIME type (“”)Stack Overflow
版权声明：本文标题：javascript - Loading module from was blocked because of a disallowed MIME type (“”) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744081507a2530331.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论