Question

我正在使用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"，总会有错误。但是，在空间幻象的正式文档中，脚本中没有type="module"。我现在真的很困惑，他们如何在不添加类型的情况下设法使其正常工作？

milsymbol.js

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

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

export { ms };

Answer 1

在将type =“ module”添加到脚本之前，我也面临着同样的问题。

以前是这样的

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

并将其更改为

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

效果很好。

Answer 2

我通过以下操作解决了这个问题：

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

在Node.js环境中使用ECMAScript 6模块时，请在文件中使用扩展名.mjs，然后使用以下命令运行文件：

node --experimental-modules filename.mjs

Answer 3

看起来错误的原因是：

1）您当前正在将源文件加载到src目录中，而不是在dist目录中构建文件（您可以看到预期的分布式文件是here）。这意味着您正在以未更改/未捆绑的状态使用本机源代码，从而导致以下错误：Uncaught SyntaxError: Cannot use import statement outside a module。应该使用捆绑版本来解决此问题，因为软件包是using rollup来创建捆绑。

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

看来您应该能够加载此文件的dist版本，以便在ms上定义window。从库作者那里查看this example，以查看如何完成此操作的示例。

Answer 4

出现此错误是因为我忘记了脚本标记中的type =“ module”：

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

Answer 5

我通过用“ require”替换“ import”解决了我的案件。

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

Answer 6

我不知道这在这里是否很明显。我想指出，就客户端（浏览器）JavaScript而言，您可以在内部和外部js脚本中添加type="module"。

说，您有一个文件“ 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>

test.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

Answer 7

对我来说，这是在我将库（特别是typeORM，使用ormconfig.js键下的entities文件）引用到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)
   ],

Answer 8

REACT 中的这个错误。以下步骤

转到项目根目录 Package.json 文件
添加"type":"module";
保存并重启服务器

Answer 9

我正在使用 vanilla js 进行编码。如果你也在做同样的事情，只需在你的脚本标签中添加一个 type="module"。

即之前的代码：
<script src="./index.js"></script>

更新代码：
<script type="module" src="./index.js"></script>

Answer 10

添加发生这种情况的原因和更多可能的原因。许多接口仍然不了解 ES6 Javascript 语法/特性，因此在任何文件或项目中使用时，都需要将 Es6 编译为 ES5。 SyntaxError: Cannot use import statement outside a module 错误的可能原因是您试图独立运行文件，您尚未安装和设置 Es6 编译器（例如 Babel）或运行脚本中文件的路径错误/未编译文件。如果你想在没有编译器的情况下继续，最好的解决方案是使用 ES5 语法，在你的情况下是 var ms = require(./ms.js); 这可以稍后适当更新或者更好地仍然设置你的编译器并确保你的文件/项目被编译在运行之前，还要确保您的运行脚本正在运行通常名为 dist、build 或任何您命名的编译文件，并且运行脚本中编译文件的路径是正确的。

Answer 11

更新节点/ NPM

将"type": "module"添加到您的package.json

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

Answer 12

由于您链接到html文件中的文件是该文件的非捆绑版本，因此触发了错误。要获得完整的捆绑版本，您必须使用npm安装它：

npm install --save milsymbol

这会将完整的程序包下载到您的node_modules文件夹中。然后，您可以在JS

上访问独立的，缩小的node_modules/milsymbol/dist/milsymbol.js文件

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

Answer 13

对我有帮助：

在使用的 ts 文件中：import prompts from "prompts";
并在 tsconfig.json 中使用 "module": "commonjs"

Answer 14

使用此代码对我来说效果很好：将此脚本标记添加到 index.html

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

Answer 15

只需在src中.pack标记的名称和扩展名之间添加<script>。即：

<script src="name.pack.js">
// code here
</script>

Answer 16

TypeScript、React、index.html

    //conf.js:
    window.bar = "bar";
    
   //index.html 
    <script type="module" src="./conf.js"></script>
    
    //tsconfig.json
    "include": ["typings-custom/**/*.ts"]
    
    //typings-custom/typings.d.ts
    declare var bar:string;

    //App.tsx
    console.log('bar', window.bar);
    or
    console.log('bar', bar);

Answer 17

在我的案例中我所做的是更新

"lib": [
      "es2020",
      "dom"
    ]

与

"lib": [
  "es2016",
  "dom"
]

在我的 tsconfig.json 文件中

Answer 18

因为你没有导出，ts文件需要导出类格式，而在js文件中我们会使用exports函数。

因此，我们必须使用 var_name = require("<pathfile>") 来使用该文件函数。

Answer 19

我在尝试使用 import express 时遇到了这个错误

而不是 import express from 'express';

我使用了 const express = require('express');

希望它有效！

Answer 20

嗯，就我而言，我不想更新我的 package.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 之上的任何模块
我对此很陌生，所以如果有任何误导性信息，请告诉我:)

导入ES6时出现“未捕获的SyntaxError：无法在模块外部使用import语句”

20 个答案:

更新节点/ NPM