Solve - Unexpected token 'export' Error in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Table of Contents #

  1. Uncaught SyntaxError Unexpected token 'export' in Node.JS
  2. Uncaught SyntaxError Unexpected token 'export' in Browser

Uncaught SyntaxError Unexpected token 'export' #

The "Uncaught SyntaxError Unexpected token 'export'" occurs for 2 main reasons:

  1. Using the ES6 Module syntax in a Node.js application without type to module in package.json.
  2. Using the ES6 Module syntax in a script without setting type to module in the script tag.

uncaught syntaxerror unexpected token export

If you got the error in a browser environment, scroll down to the next subheading.

Uncaught SyntaxError Unexpected token 'export' in Node.JS #

Here's an example of the error in a Node.js application.

index.js
// ⛔️ Uncaught SyntaxError: Unexpected token 'export' export class Person { constructor(first) { this.first = first; } }

To solve the "Uncaught SyntaxError Unexpected token 'export'" error, set the type property to module in your package.json file. Files ending with a .js extension are loaded as ES6 modules when the nearest package.json has a type field set to module.

If you don't have a package.json file, you can create one with the npm init -y command.

Open your terminal in your project's root directory and run the following command.

shell
npm init -y

Now set the type property to module in the package.json file:

package.json
{ "type": "module", "name": "javascript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

Now you are able to use the ES6 module syntax in your Node.js application.

index.js
export class Person { constructor(first) { this.first = first; } }

And here's how we would import the class in another file.

another-file.js
import {Person} from './another-file.js'; const p1 = new Person('James'); console.log(p1);
Setting the type property to module in the package.json file of your project allows you to use ES6 modules in your Node.js application.

If you don't want to set the type property to module in your package.json, you can use the older CommonJS syntax.

To solve the "Uncaught SyntaxError Unexpected token 'export'", refactor your code to use the CommonJS syntax, e.g. module.exports = {num}; instead of export num = 10;.

index.js
class Person { constructor(first) { this.first = first; } } // ✅ Using module.exports instead of export module.exports = { Person, };

Then we are able to import members of other files using require().

another-file.js
const {Person} = require('./index.js');
The reason the error occurs is - we're not allowed to use the ES6 Module syntax in Node.js yet.

There are multiple ways around it, e.g. to use babel to transpile our ES6 code to an older version of JavaScript, or simply refactor our code to the CommonJS syntax.

Uncaught SyntaxError Unexpected token 'export' in Browser #

To solve the "Uncaught SyntaxError Unexpected token 'export'" error, set the type of your <script /> tags to module, e.g. <script type="module" src="index.js"></script>. The type="module" attribute is supported in all modern browsers and allows us to use the ES6 modules syntax.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ✅ type is set to `module` ✅ --> <script type="module" src="index.js"></script> </body> </html>

This enables us to use the ES6 modules syntax in our index.js file.

index.js
// ✅ Works export class Person { constructor(first) { this.first = first; } }
As long as you use set the type attribute to module when loading your scripts, you are able to use the ES6 modules syntax.

You can then the exports of other files using the ES modules syntax.

another-file.js
import {Person} from './index.js'; console.log(Person);

Note that you have to set the type attribute to module on all scripts that use the ES Modules syntax.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ✅ type is set to `module` ✅ --> <script type="module" src="index.js"></script> <script type="module" src="another-file.js"></script> </body> </html>
All modern browsers support the type="module" attribute.

Here are some examples of using the ES6 modules syntax with named or default exports.

Named exports using ES6 modules:

index.js
export class Person {} export class Animal {}

Now importing in another file.

another-file.js
import {Person, Animal} from './index.js'

Default exports using ES6 modules. Note that you can only have 1 default export per file.

index.js
export default class Person {}

Now importing in another file.

another-file.js
import Person from './index.js'

You can also mix and match:

index.js
export default class Person {} export const age = 30;

Now import both exports in another file.

another-file.js
import Person, {age} from './index.js'

Further Reading #

Use the search field on my Home Page to filter through my more than 3,000 articles.