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

当前回答

这对我有帮助:

在.ts文件中，我使用:import prompts from "prompts"; 并在tsconfig.json文件中使用了"module": "commonjs"

2021-06-21 19:50:22

其他回答

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

也就是之前的代码:

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

更新后的代码:

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

2021-04-06 21:10:42

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

将这个脚本标签添加到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

错误的原因如下:

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

对我来说，我不想更新我的包。Json文件，并将文件类型更改为mjs。

所以我四处寻找，发现在tsconfig文件中更改模块。Json会影响结果。我的ts.config文件是:

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
    ],
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/**/*.ts"
  ]
}

像这样，将模块从"module": "es2020"改为"module": "commonjs"解决了我的问题。

我正在使用MikroORM，并认为它可能不支持任何CommonJS以上的模块。

2021-07-25 10:53:29

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

推荐文章

最新文章

标签