logo标签列表

获得意外的令牌“Export”

javascriptecmascript-6webpackbabeljs
528

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

export class MyClass {
  constructor() {
    console.log("es6");
  }
}
7
没有足够的信息了解你的环境或配置，无法提供任何帮助。这个错误提示表明 webpack 或 babel 没有正常工作，因为 export 只在 ES6 中可用，而这些模块提供了 ES6 支持。 - Claies
60
你应该使用 module.exports = MyClass，而不是 export class MyClass。 - onmyway133
1
如果您正在Node> 12中运行此代码，请将文件重命名为myFile.mjs。该“mjs”扩展名应告诉Node您正在使用ES6模块语法。 - Yair Kukielka
20个回答
0

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

问题是我正在将我的代码从非模块化转换为模块化，但我忘记删除导入的脚本文件。

我的“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>时，一切开始正常工作。

错误信息应该是“无法在非模块JS中导出”，而不是低级解析错误“意外的令牌导出”。 - zwcloud
0
通常在 .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>

最后在实际服务器上运行此代码

0
解决这个问题：浏览器只支持ES语法，不理解CommonJS中使用的require和exports。这个问题源于导入具有.ts扩展名的文件。 为了解决这个问题，在你的文件中使用ES6模块导入。
示例： 文件夹结构
dist
src
|-app.ts
|-components
  |-button.ts
|-helper
  |-eventHander.ts
tsconfig.json
index.html
  1. 在 tsconfig 文件中设置 "module": "ES2015"
  2. 在 tsconfig 文件中设置 "outDir": "./dist"
  3. 在 HTML 文件中添加属性 <script type="module" src="./dist/app.js"></script>

关于模块的更多信息，请参阅：JavaScript 模块

  • eventHander.ts 文件
type Handler<T> = (e: T) => void;
const eventHander: Handler<Event> = (e: Event) => {
  e.preventDefault();
  alert("You Clicked");
};
export default eventHander;

在button.ts文件中。
import eventHander from "../helper/eventHander.js"
function createButton(): HTMLElement {
  let button: HTMLElement;
  button = document.createElement("button");
  button.addEventListener("click", eventHander);
  button.innerText = "Click Me"
return button 
}
export default createButton

在app.ts文件中
import createButton from "./components/button.js";
const hostElement: HTMLElement = document.getElementById("app")!;
hostElement.insertAdjacentElement("beforeend", createButton());

你的HTML代码应该像这样：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script type="module" src="./dist/app.js"></script>
-1

可能的答案

我曾经遇到过这个问题，在我的情况下，问题出在我忘记给文件添加扩展名了 << File.ts >>

1
你的回答当前表述不够清晰，请在[编辑]中添加额外细节，以帮助其他人理解这如何回答问题。您可以在帮助中心找到有关编写良好答案的更多信息。 - Community
-1

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

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

-1

对于那些在2022年看到这篇文章的人，我也遇到了同样的错误，但是我将我的代码更改为类似于以下内容：

    module.exports = () => {
    getUsers: () => users;
    addUser: (user) => users.push(user);
  };
-1
在最新版本的Nodejs（v17？）中，您可以通过使用.mjs文件扩展名而不是转译或解决方法来使用顶级“import”、“async”和“await”。
   // > node my.mjs
   
   import {MyClass} from 'https://someurl'
   async func () {
     // return some promise
   }
   await func ()
-2

使用ES6语法在Node中不起作用，不幸的是，显然你必须要有Babel才能让编译器理解export或import等语法。

npm install babel-cli --save

现在我们需要创建一个 .babelrc 文件，在 babelrc 文件中，我们将设置 babel 使用我们安装的 es2015 预设作为编译成 ES5 的预设。
在我们应用程序的根目录下，我们将创建一个 .babelrc 文件。 $ npm install babel-preset-es2015 --save 在我们应用程序的根目录下，我们将创建一个 .babelrc 文件。
{  "presets": ["es2015"] }

希望它能正常工作... :)
-4

// ✅ 使用 module.exports 而不是 export module.exports = { Person, };

-5

我想提供一个简单的解决方案。使用const和反引号（`）。

const model = `<script type="module" src="/"></<script>`
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接