开发者问题收集

导入 ECMAScript 6 时出现“未捕获语法错误：无法在模块外使用导入语句”

2019-10-03
4192347
javascript ecmascript-6 arcgis arcgis-js-api

我使用的是 ArcGIS JSAPI 4.12，想用 Spatial Illusions 在地图上画军事符号。

我在脚本中添加 milsymbol.js 后，控制台返回错误

Uncaught SyntaxError: Cannot use import statement outside a module`

所以我在脚本中添加 type="module" ，结果返回错误

Uncaught ReferenceError: ms is not defined

这是我的代码： 

<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 };
3个回答

针对 Node.js / NPM 进行更新

将 "type": "module" 添加到您的 package.json 文件中。 

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

注意 ：使用模块时，如果出现 ReferenceError: require is not defined ，则需要使用 import 语法 ，而不是 require 。您无法在本机上混合搭配使用它们，因此您需要选择其中一个，或者 如果您需要同时使用两者，则使用捆绑器 。

KyleMit
2020-11-03

我收到此错误是因为我忘记了脚本标记内的 type="module" ： 

<script type="module" src="whatever.js"></script>
Emmanuel
2019-11-03

错误原因似乎如下：

  1. 您当前正在加载 src 目录中的源文件，而不是 dist 目录中的构建文件（您可以在 此处 查看预期的分发文件）。这意味着您正在使用未更改/未捆绑状态的本机源代码，从而导致以下错误： Uncaught SyntaxError：无法在模块外使用 import 语句 。应使用捆绑版本修复此问题，因为该包 使用 rollup 创建捆绑包。

  2. 您收到 Uncaught ReferenceError: ms is not defined 错误的原因是因为模块是作用域化的，并且由于您使用本机模块加载库， ms 不在全局作用域内，因此无法在以下脚本标记中访问。

看起来您应该能够加载此文件的 dist 版本，以便在 window 上定义 ms 。查看库作者提供的 此示例 ，了解如何完成此操作的示例。

Kai
2019-10-03