ChatGPT解决这个技术问题 Extra ChatGPT

获得意外的令牌导出

我正在尝试在我的项目中运行一些 ES6 代码,但我收到了意外的令牌导出错误。

export class MyClass {
  constructor() {
    console.log("es6");
  }
}
没有足够的关于您的环境或配置的信息来提供任何帮助。此错误表明 webpack 或 babel 无法正常工作,因为 export 仅在 ES6 中可用,而这些模块提供 ES6 支持。
您应该使用 module.exports = MyClass,而不是 export class MyClass
如果你在 Node > 中运行它12、将文件重命名为myFile.mjs。该 mjs 扩展应该告诉 Node 您正在使用 ES6 模块语法。

P
Phil Ricketts

2022 年更新

您正在使用 ES6 模块语法。

这意味着您的环境(例如节点 v14.13.0 或更新版本)必须支持 ESM(Ecmascript 模块语法)。

NodeJS 自 v14.13.0 起支持 EcmaScript 模块语法,但必须通过将属性 "type":"module" 添加到 package.json 来启用它。 v14.13.0 之前的 NodeJS 版本默认使用 CommonJS 模块语法(module.exports),而不是 ES6 模块语法(export 关键字)。

解决方案:

如上所述在 package.json 中启用模块支持,如果

使用 CommonJS 语法重构(适用于旧版本的 NodeJS)

接受 TypeScript 更好,并将 .ts 文件与 ts-node 或 ts-node-dev npm 包一起编写

(已弃用)使用 babel npm 包将 ES6 转换为 commonjs 目标

近年来,Javascript 模块标准发生了很大变化,因此可能会有些混乱。


nodejs 什么时候会原生支持 import?我以为 v10.0.0 会有它,但显然没有。
@chovy 实验性支持可通过标志“--experimental-modules”获得。文件需要具有 .mjs 扩展名
我在使用具有模块本机支持的 Chrome 66 时遇到此错误。
对于仍然不清楚 CommonJs 语法的人。请查看此链接,可能会有所帮助。 flaviocopes.com/commonjs
这不是一个真正有用的评论,但对于前端世界之外的人来说,这一切都非常令人困惑。只是想构建一个用于 web 的模块,我正在 CLI 中对其进行测试。我会假设 Node.js 作为成熟的环境将支持开箱即用的 ES6 语法。
P
Pang

如果您收到此错误,也可能与您如何将 JavaScript 文件包含到您的 html 页面中有关。加载模块时,您必须明确声明这些文件。这是一个例子:

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

当您包含这样的脚本时:

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

你会得到错误:

未捕获的 SyntaxError:意外的令牌导出

您需要包含类型属性设置为“模块”的文件:

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

那么它应该可以按预期工作,并且您已准备好将您的模块导入另一个模块:

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );

与“最受好评”的答案不同,这实际上解决了问题并解释了为什么会发生这种情况,而没有暗示唯一的选择是利用 CommonJS 方法、APM 方法或转译我们的代码......这也是一个例外根据 w3c 标准,其中 type 应该是有效的 mime 类型(又名媒体类型),所以这是一个意外的发现。谢谢!
这修复了错误,但随后我在 Chrome 67 中的 import 语句的行上得到“Unexpected token {”,其中的脚本是内联的,例如
@PandaWood 从模块导入时,您必须使用 <script type="module">import ...</script>。我在最新版本的 Chromium 中对其进行了测试。
我只想提一下,在使用专家默认值时,您不打算使用相同的名称,另一方面,仅导出时,您必须对函数、对象 ..etc 使用相同的名称除此之外,您应该使用 .js 作为后缀导入
从 jsDelivr 等外部站点加载脚本时如何使用 import ...
B
Barnstokkr

我的两分钱

出口

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

其他.js

import { MyClass1, MyClass2 } from './myClass';

CommonJS 替代方案

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

其他.js

const { MyClass1, MyClass2 } = require('./myClass');

导出默认值

ES6

myClass.js

export default class MyClass {
}

其他.js

import MyClass from './myClass';

CommonJS 替代方案

myClass.js

module.exports = class MyClass1 {
}

其他.js

const MyClass = require('./myClass');

希望这可以帮助


谢谢!这确实帮助我理解了 ES6 和 CommonJS 导入/导出模式之间的区别。
m
mattdlockyer

我通过制作一个入口点文件来解决这个问题。

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

我在 app.js 内外导入的任何文件都与 imports/exports 一起使用,现在您只需像 node index.js 一样运行它

注意:如果 app.js 使用 export default,则在使用入口点文件时将变为 require('./app.js').default


不需要 babel、webpack、parcel 等的简单项目的最佳答案......我在 monorepo 项目中使用了简单的 /server express 项目。像魅力一样工作......
很好的答案。这样,我的项目中很多不同的模块文件就可以紧密联系起来了。而且方法很简单!
这个答案真的救了我。关于这个有很多复杂或错误的答案,我简直不敢相信。
这应该是公认的答案。谢谢!
谢谢。一个最简单和有用的答案!
A
Alvin Konda

当您可以简单地使用默认的 JavaScript 模块导出时,此时无需使用 Babel(JS 已经变得非常强大)。 Check full tutorial

消息.js

module.exports = 'Hello world';

应用程序.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

那么你将如何导出一个类呢?
@SherwinAblañaDapito module.exports = class MyClass {} 有效
您提到的教程是关于 NodeJS 而不是 Javascript(香草)
J
Jalal

要使用 ES6,请添加 babel-preset-env

在您的 .babelrc 中:

{
  "presets": ["@babel/preset-env"]
}

感谢@ghanbari 评论更新答案以应用 babel 7。


@monsto 这个问题已经被作者标记为 babel。虽然 Phil Ricketts 的回答确实澄清了问题,这很好,但这个答案是对作者问题的直接解决方案。
“@babel/preset-env”
Y
YouBee

安装 babel 包 @babel/core@babel/preset 这会将 ES6 转换为 commonjs 目标,因为 node js 不直接理解 ES6 目标

npm install --save-dev @babel/core @babel/preset-env

然后,您需要在项目的根目录中创建一个名为 .babelrc 的配置文件,并在其中添加此代码。

{ "presets": ["@babel/preset-env"] }


我还需要安装@babel/register,否则我仍然会得到“SyntaxError: Cannot use import statement outside a module”
我很感激有人在这个问答线程中提到了如何使它与 es6 兼容!天哪。
P
Paramsmit Sanghani

当我尝试在我的项目中导入本地 javascript 模块时,我也遇到了意外的令牌导出错误。在我的 index.html 文件中添加脚本标记时,我通过将类型声明为模块来解决它。

<script src = "./path/to/the/module/" type = "module"></script>


C
C B

在最新版本的 Nodejs(v17?)中,您可以通过使用 .mjs 文件扩展名来使用顶级“import”、“async”、“await”——而不是转译或变通方法。

   // > node my.mjs
   
   import {MyClass} from 'https://someurl'
   async func () {
     // return some promise
   }
   await func ()

T
Thomas Andrews

我让模块工作了一段时间,然后他们没有出现这个 Uncaught SyntaxError: Unexpected token export 错误。

事实证明,我添加了一个没有闭合支架的开放式支架。就像是:

if (true) {
export function foo() {}

虽然最大的错误是忘记了结尾 },但解析器首先在大括号内找到了一个导出,这是一个禁忌。

export 关键字必须位于文件的顶层。

所以:

if (true) {
    export function foo() {}
}

也将是非法的。当解析器遇到这种情况时,它会立即停止解析,模糊地宣布滥用 export,给出与加载使用 export 关键字的“非模块”JavaScript 文件时相同的错误。它从不报告潜在的缺少大括号错误。

我花了很长时间才弄清楚这一点,所以我在这里发帖以帮助任何未来的患者。

理想情况下,解析器会报告 export 只允许在文件的顶层。


p
purushottam banerjee

使用 ES6 语法在 node 中不起作用,不幸的是,您显然必须拥有 babel 才能使编译器理解诸如导出或导入之类的语法。

npm install babel-cli --save

现在我们需要创建一个 .babelrc 文件,在 babelrc 文件中,我们将设置 babel 使用我们安装的 es2015 预设作为编译到 ES5 时的预设。

在我们应用程序的根目录中,我们将创建一个 .babelrc 文件。 $ npm install babel-preset-es2015 --save

在我们应用程序的根目录中,我们将创建一个 .babelrc 文件。

{  "presets": ["es2015"] }

希望它有效...... :)


b
badasscoder

我实际上想添加简单的解决方案。使用 const 和反引号 (`)。

const model = `<script type="module" src="/"></<script>`