导入ECMAScript 6时“Uncaught SyntaxError: Cannot use import statement outside a module”

我正在使用ArcGIS JSAPI 4.12，希望使用空间幻象在地图上绘制军事符号。

当我将milsymbol.js添加到脚本中时，控制台返回错误

无法在模块外部使用import语句

所以我添加type="module"到脚本中，然后它返回

Uncaught ReferenceError: ms未定义

这是我的代码:

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/FeatureLayer"
    ], function (Map, MapView, MapImageLayer, FeatureLayer) {

        var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
        var map = new Map({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [121, 23],
            zoom: 7
        });
    });
</script>

所以，无论我是否添加type="module"，总会有错误。但是在Spatial Illusions的官方文档中，脚本中没有type="module"。我现在真的很困惑。他们如何在不添加类型的情况下让它工作呢?

文件milsymbol.js

import { ms } from "./ms.js";

import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;

export { ms };

当前回答

我不知道这是不是很明显。我想指出的是，就客户端(浏览器)JavaScript而言，你可以将type="module"添加到外部以及内部js脚本。

比如，你有一个文件'module.js':

var a = 10;
export {a};

您可以在外部脚本中使用它，在其中执行导入操作，例如:

<!DOCTYPE html><html><body>
<script type="module" src="test.js"></script><!-- Here use type="module" rather than type="text/javascript" -->
</body></html>

. js:

import {a} from "./module.js";
alert(a);

你也可以在一个内部脚本中使用它，例如:

<!DOCTYPE html><html><body>
<script type="module">
    import {a} from "./module.js";
    alert(a);
</script>
</body></html>

值得一提的是，对于相对路径，您不能省略“。/"字符，即:

import {a} from "module.js";     // this won't work

2020-07-25 07:00:57

其他回答

我也面临着同样的问题，直到我在脚本中添加type="module"。

以前是这样的

<script src="../src/main.js"></script>

在把它改成

<script type="module" src="../src/main.js"></script>

它工作得很完美。

2020-04-03 15:59:05

我想我应该加上这句话，因为这对我来说并不明显。您需要将type="module"添加到所有脚本包含，而不仅仅是您想用于实用程序文件的脚本包含。

index . html:

<script type="module" src="js/controllers/utils.js"></script>
<script type="module" src="js/controllers/main.js"></script>`

main.js:

import myFunction from './utils.js

utils.js:

export default myFunction

2022-10-17 21:24:59

使用这段代码。这对我来说很有效:

将这个脚本标签添加到index.html文件中:

<script type="module">
    import { ms } from "./ms.js";
    import Symbol from "./ms/symbol.js";
</script>

2021-07-22 10:30:12

我通过以下方法解决了这个问题:

当从浏览器中使用ECMAScript 6模块时，在文件中使用.js扩展名，并在脚本标记中添加type = "module"。

当从Node.js环境中使用ECMAScript 6模块时，在文件中使用扩展名.mjs，并使用以下命令运行文件:

node --experimental-modules filename.mjs

编辑:这是在节点12是最新的LTS时编写的，这不适用于节点14 LTS。

2020-02-05 09:56:11

更新Node.js / NPM

在你的包中添加"type": "module"。json文件。

{
  // ...
  "type": "module",
  // ...
}

注意:当使用模块时，如果你没有定义ReferenceError: require，你将需要使用import语法而不是require。您不能在它们之间进行混合和匹配，因此您需要选择其中之一，如果需要使用两者，则使用捆绑器。

2020-11-03 00:27:30

导入ECMAScript 6时“Uncaught SyntaxError: Cannot use import statement outside a module”

推荐文章

最新文章

标签