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

Posted 2023-02-19

技术标签:

【中文标题】导入 ECMAScript 6 时出现“未捕获的语法错误：无法在模块外使用 import 语句”【英文标题】："Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 【发布时间】：2022-01-16 04:19:57 【问题描述】：

我正在使用 ArcGIS JSAPI 4.12，并希望使用 Spatial Illusions 在地图上绘制军事符号。

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

未捕获的语法错误：无法在模块外使用 import 语句`

所以我将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 ;

【问题讨论】：

我在尝试导入模块时遇到了同样的错误！你有什么解决办法吗？我现在正在使用 browserify，通过它我可以使用 require() 包含任何模块。看看这个video 这个问题在 Stack Overflow 上的所有21,642,537 questions 中以view rate 排名前十（可能来自搜索引擎点击）。在其生命周期内，它每天的浏览量约为 1800 次。 【参考方案1】：

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

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

【讨论】：

【参考方案2】：

Node.js / NPM 更新

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


  // ...
  "type": "module",
  // ...

注意：使用模块时，如果你得到ReferenceError: require is not defined，你需要使用import syntax而不是require。你不能在它们之间进行原生混合和匹配，所以你需要选择一个或use a bundler if you need to use both。

【讨论】：

我来自this 答案，现在我处于无限循环中你找到任何解决方案了吗@wormsparty 是的。基本上，不要独立运行 TypeScript 脚本，而是将它们放在现有的 Angular 项目中，一切都会正常运行；-) @wormsparty Escape the loop【参考方案3】：

看起来错误的原因是：

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

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

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

【讨论】：

感谢您的回复，现在我知道我的文件有误。我一直在寻找文件的 dist 版本，但没有结果。你知道有什么方法可以得到 dist 版本吗？非常感谢！它可以在 npm (npmjs.com/package/milsymbol) 上下载。或者，您可以通过克隆存储库并运行其中一个构建脚本来自己构建它。看起来有一个 AMD 构建脚本 (github.com/spatialillusions/milsymbol/blob/master/…) 应该允许您将构建的包直接 require 到您的代码中。我已经通过 npm 下载，现在我有脚本：<script src="node_modules/milsymbol/dist/milsymbol.js"></script>，但控制台仍然返回Uncaught ReferenceError: ms is not defined。问题是ms 没有在dist/milsymbol.js 中定义，它在src/milsymbol.js 中定义，但它需要type="module" 并且会导致范围问题。有什么解决方案。非常感谢！如果那是实际意图，从 /src 引用它怎么办。由于作者不打算公开一个类的属性，例如..【参考方案4】：

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

以前是这样的

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

然后改成

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

效果很好。

【讨论】：

让 CORS 做这件事表示您正在从另一个域请求。您可以通过在标题中添加Access-Control-Allow-Origin: * 来解决此问题。您可以在 developer.mozilla.org/en-US/docs/Web/HTTP/… 上查看有关 CORS 的 MDN 文档。不知道 cors，问题是这些是我的本地文件您需要在 http 服务器中提供脚本，浏览器使用 http 请求加载 es6 模块，服务器需要在标头中响应允许您的来源的 CORS。最简单的方法：可以使用http-server:***.com/a/23122981/935330【参考方案5】：

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

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

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

node --experimental-modules filename.mjs

编辑：这是在 node12 是最新的 LTS 时编写的，这不适用于 node 14 LTS。

【讨论】：

模块：ECMAScript 模块：启用 https://nodejs.org/api/esm.html#esm_enabling 这不再是必要的。只需将 "type": "module" 添加到您的 package.json 中，一切都会按预期工作。（使用 .js 作为文件扩展名）【参考方案6】：

我通过将“import”替换为“require”解决了我的问题。

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

【讨论】：

谢谢，我也用这个语法解决了我的问题 const parse = require('node-html-parser'); 为我工作解释是什么？为什么这行得通？请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。在节点中对我造成此问题的确切软件。问题是关于浏览器的【参考方案7】：

我不知道这是否在这里显得很明显。我想指出，就客户端（浏览器）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>

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

【讨论】：

【参考方案8】：

对我来说，这是由于没有将库（特别是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)
   ],

【讨论】：

至少对我来说，你的答案并不清楚你说的哪个是正确的方法 @claudekennilol - 感谢您的评论，我已经编辑了答案以消除歧义【参考方案9】：

我在React 中遇到了这个错误，并通过以下步骤修复了它：

进入项目根目录，打开Package.json文件进行编辑。

添加"type":"module";

保存并重启服务器。

【讨论】：

【参考方案10】：

如果您想对模块使用 import 而不是 require()，请将 type 的值更改或添加到 module 文件中的 module

例子：

package.json 文件


  "name": "appsample",
  "version": "1.0.0",
  "type": "module",
  "description": "Learning Node",
  "main": "app.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "author": "Chikeluba Anusionwu",
  "license": "ISC"

import http from 'http';

var host = '127.0.0.1',
    port = 1992,
    server = http.createServer();

server.on('request', (req, res) => 
  res.writeHead(200, "Content-Type": "text/plain");
  res.end("I am using type module in package.json file in this application.");
);

server.listen(port, () => console.log(
    'Listening to server $port. Connection has been established.'));

【讨论】：

这解决了我的问题。太棒了！我很高兴它做到了。【参考方案11】：

我正在使用原生 JavaScript 进行编码。如果您也这样做，只需将 type="module" 添加到您的脚本标签。

也就是之前的代码：

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

更新代码：

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

【讨论】：

【参考方案12】：

这对我有帮助：

import prompts from "prompts";

tsconfig.json

"module": "commonjs"

【讨论】：

它是什么.ts文件？您的代码需要添加一些模块导入的任何 typeScript 或 JavaScript 文件。【参考方案13】：

为什么会发生这种情况以及更多可能的原因：

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

SyntaxError: Cannot use import statement outside a module 错误的可能原因是您尝试独立运行文件。您尚未安装和设置 ES6 编译器，例如 Babel，或者您的 runscript 中的文件路径错误/不是编译后的文件。

如果您想在没有编译器的情况下继续，最好的解决方案是使用 ES5 语法，在您的情况下是 var ms = require(./ms.js);。这可以稍后根据需要进行更新，或者更好地设置您的编译器并确保您的文件/项目在运行之前已编译，并确保您的运行脚本正在运行通常命名为 dist、build 或您命名的任何文件的编译文件以及指向你的runscript中编译的文件是正确的。

【讨论】：

【参考方案14】：

有三种方法可以解决这个问题：

1.FIRST : 在脚本中包含 type=module

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

2.第二个：在 node.js 中放到你的 package.json 文件中


  // ...
  "type": "module",
  // ...

3.第三：按要求使用导入

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

我的回答可能对你有帮助

【讨论】：

【参考方案15】：

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

npm install --save milsymbol

这会将完整包下载到您的node_modules 文件夹。

然后，您可以通过 node_modules/milsymbol/dist/milsymbol.js 访问独立的缩小 JavaScript 文件

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

【讨论】：

--save 自 npm 5 和 node 8 (2017) 以来一直是默认值：***.com/q/36022926/1821548、nodejs.dev/npm-dependencies-and-devdependencies、github.com/benmosher/eslint-plugin-import/issues/884、auth0.com/blog/whats-new-in-node8-and-npm5【参考方案16】：

使用此代码。对我来说效果很好：

将此脚本标签添加到文件index.html：

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

【讨论】：

【参考方案17】：

我在尝试使用 import Express.js 时遇到了这个错误。

而不是 import express from 'express';

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

【讨论】：

【参考方案18】：

就我而言，我更新了

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

与

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

在我的 tsconfig.json 文件中。

【讨论】：

谢谢，您的评论引导我安装：@babel/preset-env，并且通过 npm install，我可以使用 import 语句。 @Thuy 很好。我很高兴你解决了这个问题【参考方案19】：

提供的答案都不适合我，我找到了一个不同的解决方案：https://timonweb.com/javascript/how-to-enable-ecmascript-6-imports-in-nodejs/

安装 ESM：

npm install --save esm

使用 ESM 运行：

node -r esm server.js

【讨论】：

【参考方案20】：

EXPO 遇到了同样的错误。

主要解决方法是在package.json文件中添加"type": "module",。

但是，您必须检查哪个是正确的 package.json。

在我的例子中，有两个 package.json 文件，那么你应该将它添加到服务器文件中。

要确定哪个是正确的 package.json，请找到 "scripts": "test": "echo \"Error: no test specified\" && exit 1" ,

下面↑　这行，加"type": "module",

【讨论】：

【参考方案21】：

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);

【讨论】：

【参考方案22】：

好吧，就我而言，我不想更新我的 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 以上的任何模块。

【讨论】：

【参考方案23】：

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

所以，我们必须使用var_name = require("<pathfile>") 来使用这些文件功能。

【讨论】：

您好...检查//观看...您的答案没有详细说明。插入带有代码和参考的有效响应很有用。得出一个切实有效的解决方案。这个平台不仅仅是任何论坛。我们是世界上其他程序员和开发人员最大的帮助和支持中心。查看社区条款并了解如何发帖；【参考方案24】：

将 "type": "module", 添加到您的 package.json 文件中。并重新启动您的应用程序

运行 npm start

那么你的问题就解决了

【讨论】：

【参考方案25】：

我刚刚在我的 Package.json 文件中添加了“type”：“module”，它对我有用。

【讨论】：

【参考方案26】：

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

即：

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

【讨论】：

【参考方案27】：

在 bable transpile 失败时会出现此错误

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review 这个问题与bable transpile无关

以上是关于导入 ECMAScript 6 时出现“未捕获的语法错误：无法在模块外使用 import 语句”的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET - 未捕获的 SyntaxError：无法在模块外使用 import 语句

将 Zbrush collada 模型导入 Xcode 6.2 时出现问题

PyQt5 在导入 skimage 时出现问题

访问器仅在针对 ECMAScript 5 及更高版本时可用 - 使用 TypeScript 时出现错误消息

使用导入类型时出现意外令牌

使用colab导入tensorrt时出现错误如何解决