Receiving Javascript error "Uncaught SyntaxError: cannot use import statement outside a module" when trying to import. Solution found

Receiving Javascript error "Uncaught SyntaxError: cannot use import statement outside a module" when trying to import. Solution found

深入细节,我正在尝试从一个名为 GLTFLoader 的 JS 文件导入代码,用于 Three.js。目标是解析 .GLB 文件并渲染茶壶。

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Three.js #1
    </title>
    <style>
        body{margin: 0;}
    </style>
</head>
<body>
    <script src="js/three.js"></script> // A dependecy.
    <script src="js/cube.js"></script> // The main script.
    <script src="js/loaders/GLTFLoader.mjs"></script> // The module I am trying to import code
</body>                                               // from.
</html>

导入代码和需要导入的代码。如果需要可以上传完整代码。

import {GTLFLoader} from "js/loaders/GLTFLoader.mjs"

// Create a mesh.
const loader = new GLTFLoader(); // Instantiate loader.
loader.load("assets/models/utahteapot.glb", function (gltf) { // Load the model.
scene.add(gltf.scene); // Add the loaded model to scene.
}, undefined, function (error) { // Return an error if there is one.
console.error(error);
});

我试过在脚本标签中使用“type="module""标签,我试过直接从 url 源上传 Loader 代码,我试过在 HTML 文件,我什至尝试创建一个本地服务器来托管这些文件。我以前不这样做,现在我仍然这样做。我有 运行 个想法;我找不到解决办法。 编辑:忘记提及,文件 GLTFLoader 扩展名为 .MJS,因为我遇到了一个不相关的错误。

我找到了解决办法。这不是我输入或索引文件的方式,而是我在本地服务器上为它们提供服务的方式。

MIME 错误是由于文件总是 return 作为不正确的 MIME 类型“plain/text”而我需要它 return 作为“application/x-javascript” . 导入错误是由于我没有将 type="module" 添加到 HTML 文件中的 main.js 文件中。

因此,我寻找了一个 python 脚本,该脚本创建了一个 LocalHost 服务器,可以正确地提供文件。所以这意味着我可以将 main.js 文件标记为模块,并从其他文件导入我需要的内容。

Here is the script's git.

注意:您可能需要更改本地主机号。设置的数字是 8080,我不得不在我的文件实际更新之前将我的更改为 8090。如果您的文件没有更新或出现错误,请记住这一点 returned.