528

I am trying to run some ES6 code in my project but I am getting an unexpected token export error.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}
3
  • 7
    there is not enough information about your environment or configuration to offer any assistance. This error is suggesting that either webpack or babel are not working correctly, as export is only available in ES6, and those modules are what provide ES6 support.
    – Claies
    Jul 10, 2016 at 21:44
  • 60
    You should use module.exports = MyClass, not export class MyClass
    – onmyway133
    Aug 4, 2017 at 9:47
  • 1
    If you're running this in Node > 12, rename the file to myFile.mjs. That mjs extension should tell Node you're using ES6 Module syntax. Oct 27, 2021 at 7:23

19 Answers 19

528

Updated for 2022

You are using EcmaScript Module (ESM or 'ES6 Modules') syntax but your environment does not support it.

NodeJS versions prior to v14.13.0 do not support ESM (export keyword syntax) and use CommonJS Modules (module.exports property syntax). NodeJS v14.13.0 and newer supports ESM but it must be enabled first.

Solutions:

  • If you are using NodeJS v14.13.0 or newer (which does support ESM) you can enable it by setting "type":"module" in your project package.json
  • Refactor with CommonJS Module syntax (for older versions of NodeJS)
  • Consider using TypeScript alongside ts-node or ts-node-dev npm packages (for instant transpilation at development time) and write TypeScript in .ts files
  • Transpile ESM to CommonJS using esbuild (esbuild package on npm) configured to transpile your ES6 javascript to a CommonJS target supported by your environment. (babel is no longer recommended)
13
  • 51
    When will nodejs support import natively? I thought v10.0.0 would have it but apparently not.
    – chovy
    Apr 30, 2018 at 20:42
  • 8
    @chovy experimental support is available with flag "--experimental-modules". Files needs to have a .mjs extension May 6, 2018 at 22:44
  • 4
    I'm getting this error using Chrome 66 with native support for modules. Feb 23, 2019 at 6:14
  • 3
    For someone are still not clear about CommonJs Syntax. please checkout this link, may help a little bit. flaviocopes.com/commonjs
    – L.T.
    Aug 26, 2019 at 13:19
  • 28
    Not really a helpful comment, but for someone outside of the front-end world it is all quite confusing. Just wanted to build a module used for web, which I am testing in the CLI. I would've assumed that Node.js being mature environment would support ES6 syntax out of the box. Apr 4, 2020 at 19:53
380

In case you get this error, it might also be related to how you included the JavaScript file into your html page. When loading modules, you have to explicitly declare those files as such. Here's an example:

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

var bar = "bar";

export { foo, bar };

When you include the script like this:

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

You will get the error:

Uncaught SyntaxError: Unexpected token export

You need to include the file with a type attribute set to "module":

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

then it should work as expected and you are ready to import your module in another module:

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

console.log( foo() );
console.log( bar );
8
  • 101
    unlike the "most-upvoted" answer, this actually solves the problem and explains why it is happening without suggesting that the only option is to leverage a CommonJS method, APM method, or to transpile our code... This would also be an exception to the w3c standard where type is expected to be a valid mime type (aka. media type), so this was an unexpected find. Thanks! May 20, 2018 at 0:51
  • 5
    This fixes the error but I then get "Unexpected token {" on the line of the import statement in Chrome 67 with script that is inline eg <script>import ...</script>
    – PandaWood
    Jul 27, 2018 at 12:01
  • 1
    @PandaWood You have to use <script type="module">import ...</script>, when you import from module. I tested it in recent version of Chromium. Aug 1, 2018 at 7:10
  • I just want to mention when using expert default you are not intended to put the same name, on the other hand export only you must follow same name for function, object ..etc In addition to that, you should import with .js as suffix
    – 7usien
    Aug 24, 2021 at 18:12
  • 1
    For anyone reading this, also beware that all type="module" will be deferred, which in some cases may mess things up if you were relying on loading order
    – Kobato
    Jun 5, 2022 at 21:34
140

My two cents

Export

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

CommonJS Alternative

myClass.js

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

other.js

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

Export Default

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJS Alternative

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');
2
  • 2
    Thanks! This really helped me understand the difference between ES6 and CommonJS import/export patterns.
    – camslice
    Nov 15, 2021 at 3:37
  • 1
    Thank you! I tried the above (Export and ES6) with TypeScript (.ts) files in Visual Studio 2022 but, getting "Uncaught SyntaxError: Unexpected token 'export" error. Did anyone else come across this issue?
    – JGV
    Jan 26 at 2:42
25

There is no need to use Babel at this moment (JS has become very powerful) when you can simply use the default JavaScript module exports. Check full tutorial

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World
3
  • 6
    Well how would you export a class then? Dec 20, 2019 at 3:08
  • 2
    @SherwinAblañaDapito module.exports = class MyClass {} works Jan 7, 2020 at 18:19
  • 1
    the tutorial you mentioned is about NodeJS not Javascript (vanilla)
    – Eve
    Jan 21, 2022 at 0:27
25

I fixed this by making an entry point file like.

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

and any file I imported inside app.js and beyond worked with imports/exports now you just run it like node index.js

Note: if app.js uses export default, this becomes require('./app.js').default when using the entry point file.

5
  • 1
    Best answer for simple projects not needing babel, webpack, parcel etc... I used in monorepo project with simple /server express for project. Worked like a charm... Mar 5, 2020 at 17:10
  • 1
    Very good answer. In this way, many different module files in my project can be closely linked. And the way is so simple!
    – Lancer.Yan
    Nov 27, 2020 at 7:43
  • 1
    This answer saved me, really. There are so many complicated or wrong answers about this out there that I just can't believe it. Mar 2, 2021 at 17:45
  • This should be the accepted answer. Thank you!
    – Stefan D
    Apr 6, 2021 at 2:47
  • 1
    Thanks. A most simple and helpful answer!
    – nmDat
    Aug 21, 2021 at 4:33
12

To use ES6 add babel-preset-env

and in your .babelrc:

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

Answer updated thanks to @ghanbari comment to apply babel 7.

2
  • 7
    @monsto this question was already tagged babel by the author. Whilst Phil Ricketts answer does clarify the problem, which is good, this answer is a direct solution to the author's problem.
    – boycy
    Apr 24, 2018 at 15:00
  • "@babel/preset-env"
    – ghanbari
    Jun 16, 2019 at 10:15
7

Install the babel packages @babel/core and @babel/preset which will convert ES6 to a commonjs target as node js doesn't understand ES6 targets directly

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

Then you need to create one configuration file with name .babelrc in your project's root directory and add this code there.

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

2
  • 2
    I also needed to install @babel/register, otherwise I would still get "SyntaxError: Cannot use import statement outside a module"
    – molecular
    Nov 29, 2019 at 9:05
  • i'm grateful that someone actually mentioned how you could make it compatible with es6 in this q&a thread! jeez.
    – Hari Reddy
    Aug 14, 2021 at 22:50
2

I had modules working for a while, and then they weren't with this Uncaught SyntaxError: Unexpected token export error.

Turns out, I had added an open brace without a closed brace. Something like:

if (true) {
/* } missing here */

export function foo() {}

While the big error is the forgetting of the end }, the parser first finds an export inside the brace, which is a no-no.

The export keyword must be in the top level of the file.

So:

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

would also be illegal. When the parser encounters this, it stops parsing right there, announcing the misuse of export vaguely, giving the same error it gives when it is loading a "non-module" JavaScript file that uses the export keyword. It never reports the underlying missing brace error.

Took me a long time to figure that out, so I'm posting here to help any future sufferers.

Ideally, the parser would report that export is only allowed at the top level of the file.

1
  • 1
    Nice one. I'm sure this will help someone take a second look at their code. Sometimes the solution is staring us in the face. :) Feb 19 at 22:21
0

I experienced this problem and it took me an hour to find my problem.

The problem was that I was changing my code from non-modules to modules and I forgot to delete the imported script file.

My "table.js" file had the following line. This is the module file.

export function tableize(tableIdentifier) {

My "orderinquiry.js" file had the following line.

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

My "orderinquiry.html" had the following two lines.

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

While the second line is good and declares type='module. But the first line directly links to table.js and caused the unexpected error. Everything started working when I removed that first <script>.

1
  • The error message should be "cannot export in a non-module js." instead of a low-level parsing error "unexpected token export".
    – zwcloud
    Nov 18, 2022 at 17:18
0

Normally import not working in a .js extension because by default js means cjs version of javascript. If you want to es6 feature you need to rename the .js extension to the .mjs extension

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>

Finally run this code on live server

0

Just use tsx as your runtime instead of node. It will allow you to use normal import statements, without switching your project to type: module and without having to deal with the nasty consequences of type: module. In addition, you'll get TypeScript support.

0

Another way to import ES6 module from CommonJS is to rename your ES6 module file to have .mjs extension. This is one way for backward compatibility. Then in your CommonJS code, you can import like this:

Top of file import:

import myClass from "./MyClass.mjs"

or Dynamic Import anywhere in the code:

const myClass = await import("./MyClass.mjs");

Note that your CommonJS file does not need to be renamed to .mjs. More info here.

0

Got through this problem: browsers only support the ES syntax and do not understand require and exports as used in CommonJS. The problem arises from importing files that have the .ts extension. To solve this use the ES6 module import in your files.

Example: Folder Structure

dist
src
|-app.ts
|-components
  |-button.ts
|-helper
  |-eventHander.ts
tsconfig.json
index.html
  1. In the tsconfig file, set "module": "ES2015"
  2. In the tsconfig file, set "outDir": "./dist"
  3. In the HTML file add the attribute <script type="module" src="./dist/app.js"></script>

You can read more about modules here: JavaScript modules

  • The eventHander.ts file
type Handler<T> = (e: T) => void;
const eventHander: Handler<Event> = (e: Event) => {
  e.preventDefault();
  alert("You Clicked");
};
export default eventHander;
  • In the 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 
  • In the app.ts file
import createButton from "./components/button.js";
const hostElement: HTMLElement = document.getElementById("app")!;
hostElement.insertAdjacentElement("beforeend", createButton());

Your HTML code should be like this:

<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

I got the unexpected token export error also when I was trying to import a local javascript module in my project. I solved it by declaring a type as a module when adding a script tag in my index.html file.

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

-1

In the latest versions of Nodejs (v17?) you can use top-level "import", "async", "await" by using the .mjs file extension - instead of transpiling or workarounds.

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

For those that are viewing this in 2022, I had the same error, however I changed my code to something like this:

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

Using ES6 syntax does not work in node, unfortunately, you have to have babel apparently to make the compiler understand syntax such as export or import.

npm install babel-cli --save

Now we need to create a .babelrc file, in the babelrc file, we’ll set babel to use the es2015 preset we installed as its preset when compiling to ES5.

At the root of our app, we’ll create a .babelrc file. $ npm install babel-preset-es2015 --save

At the root of our app, we’ll create a .babelrc file.

{  "presets": ["es2015"] }

Hope it works ... :)

-4

// ✅ Using module.exports instead of export module.exports = { Person, };

-5

I actually want to add simple solution. use constand backticks(`).

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.