获得意外的令牌导出

我试图在我的项目中运行一些ES6代码，但我得到了一个意外的令牌导出错误。

export class MyClass {
constructor() {
console.log("es6");
}
}
731505 次浏览
小开

2022年更新

您正在使用EcmaScript模块(ESM或'ES6模块')语法，但您的环境不支持它。

v14.13.0之前的NodeJS版本不支持ESM (export关键字语法)，并使用CommonJS模块(module.exports属性语法)。NodeJS v14.13.0及更新版本支持ESM，但必须先启用它。

解决方案:

  • 如果你使用的是NodeJS v14.13.0或更新版本(不支持ESM)，你可以通过在你的项目package.json中设置"type":"module"来启用它
  • 使用CommonJS模块语法重构(用于旧版本的NodeJS)
  • 考虑将打印稿与ts-node或ts-node-dev npm包一起使用(用于开发时的即时编译)，并在.ts文件中编写TypeScript
  • 使用esbuild (npm上的esbuild包)将ESM编译到CommonJS，配置为将你的ES6 javascript编译到你的环境支持的CommonJS目标。(巴别塔不再推荐)
小开

要使用ES6，添加babel-preset-env

在你的.babelrc中:

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

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

小开

如果遇到此错误，也可能与将JavaScript文件包含到html页面的方式有关。在加载模块时，必须显式地声明这些文件。这里有一个例子:

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


var bar = "bar";


export { foo, bar };

当你像这样包含脚本时:

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

你会得到错误:

Uncaught SyntaxError:意外的令牌导出

你需要包含一个类型属性为"module"的文件:

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

然后它应该会像预期的那样工作，你已经准备好在另一个模块中导入你的模块了:

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


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

使用ES6语法不能在node中工作，不幸的是，你必须有babel显然使编译器理解语法，如导出或导入。

npm install babel-cli --save

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

在我们的应用程序的根目录，我们将创建一个.babelrc文件。 $ NPM install babel-preset-es2015——保存

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

{  "presets": ["es2015"] }

希望它有用…：）

小开

安装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 (JS已经变得非常强大)，因为您可以简单地使用默认的JavaScript模块导出。查看完整教程

Message.js

module.exports = 'Hello world';

app.js

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


console.log(msg); // Hello World
小开

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

// 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。

小开

我的意见

出口

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

CommonJS替代

myClass.js

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

other.js

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

出口违约

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJS替代

myClass.js

module.exports = class MyClass1 {
}

other.js

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

希望这能有所帮助

小开

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

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

小开

实际上我想添加一个简单的解决方案。使用__abc0和反引号(')。

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

在最新版本的Nodejs (v17?)中，你可以使用顶级的“import”，“async”，“await”;通过使用.mjs文件扩展名-而不是编译或变通。

   // > node my.mjs
   

import {MyClass} from 'https://someurl'
async func () {
// return some promise
}
await func ()
小开

我的模块工作了一段时间，然后它们没有这个Uncaught SyntaxError: Unexpected token export错误。

结果是，我添加了一个开大括号而没有一个闭大括号。喜欢的东西:

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

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

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

所以:

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

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

我花了很长时间才弄明白，所以我在这里发帖，以帮助未来的患者。

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

小开

可能的答案

我有这个问题，在我的情况下发生的是，我缺乏添加扩展到文件 & lt; & lt;文件。ts祝辞祝辞< / p >
小开

我遇到过这个问题，我花了一个小时才找到我的问题。

问题是我正在将我的代码从非模块更改为模块，并且我忘记删除导入的脚本文件。

我的“table.js"文件中有以下一行。这是模块文件。

export function tableize(tableIdentifier) {

我的“orderinquiry.js"文件中有以下一行。

import { tableize, changeColumnSizesDynamic } from '../common/table.js';

我的“orderinquiry.html"有下面两行。

<script src='/resources/js/common/table.js'></script>
<script type='module' src='/resources/js/client/orderinquiry.js'></script>

而第二行很好，声明type='module。但是第一行直接链接到table.js，导致了意外的错误。当我删除第一个<script>时，一切都开始工作了。

小开

对于那些在2022年看到这篇文章的人来说，我也犯了同样的错误，但我把代码改成了这样:

    module.exports = () => {
getUsers: () => users;
addUser: (user) => users.push(user);
};
小开

通常import不能在.js扩展名中工作，因为默认情况下js意味着javascript的cjs版本。如果你想要es6特性，你需要将.js扩展名重命名为.mjs扩展名

parent.mjs

export default class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}

child.mjs

import Car from './parent.mjs'
export default class Model extends Car {
constructor(brand, mod , country) {
super(brand);
this.model = mod;
this.country = country;
}
show() {
return this.present() + ', it is a ' + this.model + "i am from " +
this.country;
}
}

index . html

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
shrink-to-fit=no">
<title>Quick Start Pack Template</title>
</head>
<div class="demo"></div>
<script type="module">
import Model from './child.mjs'
let value = new Model("Ford", "Mustang", "bangladesh")
document.querySelector(".demo").innerHTML = value.show()
</script>
</body>
</html>

最后在活动服务器上运行此代码


提交答案