导入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 };

当前回答

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

当从浏览器中使用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

其他回答

我正在编写香草JavaScript。如果你做同样的事情，只需添加一个type="module"到你的脚本标签。

也就是之前的代码:

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

更新后的代码:

<script type="module" src="./index.js"></script>`

2021-04-06 21:10:42

对我来说，这是由于没有引用一个库(特别是typeORM，使用ormconfig.js文件，在实体键下)到src文件夹，而不是dist文件夹…

   "entities": [
      "src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
   ],

而不是

   "entities": [
      "dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
   ],

2020-09-14 09:46:35

触发此错误是因为您在HTML文件中链接到的文件是该文件的未绑定版本。要获得完整的捆绑版本，你必须安装npm:

npm install --save milsymbol

这将把完整的包下载到node_modules文件夹中。

然后，您可以在node_modules/milsymbol/dist/milsymbol.js中访问独立的微型JavaScript文件

您可以在任何目录中执行此操作，然后将下面的文件复制到/src目录。

2019-11-03 21:30:21

我把“import”替换为“require”，解决了这个问题。

// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');

2020-05-15 00:22:22

我不得不从一个外部文件(JavaScript文件)导入一些数据，到我的script.js文件中呈现在我的HTML文件中。

文件data.js

const data = {a: 1, b: 2}

通过添加type=module，我得到了CORS错误。

我发现我可以导入文件data.js到我的script.js文件，只需包括文件data.js在我的HTML文件。

例如，以前我的HTML文件由

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

因为我需要一些数据从文件data.js，我只是把我的HTML文件更改为:

<script src="assets/data.js"></script>
<script src="assets/script.js"></script>

也就是说，在script.js文件之前包含data.js文件，允许访问script.js文件中的数据变量。

2022-01-15 11:40:19

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

推荐文章

最新文章

标签