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

当前回答

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

并重新启动应用程序:

npm开始

那么你的问题就解决了。

2021-09-07 04:39:52

其他回答

我不知道这是不是很明显。我想指出的是，就客户端(浏览器)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

错误的原因如下:

You're currently loading the source file in the src directory instead of the built file in the dist directory (you can see what the intended distributed file is here). This means that you're using the native source code in an unaltered/unbundled state, leading to the following error: Uncaught SyntaxError: Cannot use import statement outside a module. This should be fixed by using the bundled version since the package is using rollup to create a bundle. The reason you're getting the Uncaught ReferenceError: ms is not defined error is because modules are scoped, and since you're loading the library using native modules, ms is not in the global scope and is therefore not accessible in the following script tag.

看起来你应该能够加载这个文件的dist版本，在窗口上定义ms。请查看库作者提供的这个示例，以了解如何做到这一点。

2019-10-03 04:31:03

为什么会出现这种情况以及更多可能的原因:

很多接口仍然不理解ES6 JavaScript语法/特性。因此，无论在任何文件或项目中使用ES6，都需要将ES6编译为ES5。

出现SyntaxError:不能在模块外使用import语句错误的可能原因是您试图独立运行该文件。您还没有安装和设置ES6编译器(如Babel)，或者您的runscript中的文件路径是错误的/不是编译文件。

如果你想继续没有编译器，最好的解决方案是使用ES5语法，在你的情况下，这将是var ms = require(./ms.js);。这可以稍后更新为适当或更好的仍然设置你的编译器，并确保你的文件/项目在运行之前编译，也确保你的运行脚本正在运行编译文件，通常命名为dist, build或任何你命名的文件，在你的runscript中编译文件的路径是正确的。

2021-01-05 04:44:42

更新Node.js / NPM

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

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

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

2020-11-03 00:27:30

对我来说，这是由于没有引用一个库(特别是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

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

推荐文章

最新文章

标签