How to Fix SyntaxError Unexpected Token ‘Export’

SyntaxError Unexpected Token 'Export'

SyntaxError Unexpected token ‘export’ in JavaScript

The “Uncaught SyntaxError Unexpected token ‘export'” occurs for 2 main reasons:

  • Using the ES6 Module syntax in a Node.js application without typing to the module in the package. Json.
  • Using the ES6 Module syntax in a script without setting type to the module in the script tag.

Read Similar Article: ImportError: Attempted Relative Import with No Known Parent Package

Uncaught SyntaxError Unexpected token ‘export’ in Node.JS

Here’s an example of how the error occurs in a Node.js application.

index.js

// ⛔️ Uncaught SyntaxError: Unexpected token ‘export’

export class Person {

constructor(first) {

this.first = first.

}

}

Set the type of property to the module in your package.json file

To solve the error, set the type of property to the 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 of 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 of property to the module in the package.json file:

package.json

{

“type”: “module”,

// … rest

}

SyntaxError Unexpected token 'export'
SyntaxError Unexpected token ‘export’

Now you can use the ES6 modules import/export syntax in your Node.js application.

This is a file called index.js that has 2 named exports.

index.js

// 👇️ named export

export class Person {

constructor(first) {

this.first = first.

}

}

// 👇️ named export

export const site = ‘bobbyhadz.com’.

And here’s how we would import the class and variable into a file called another-file.js.

another-file.js

import {Person, site} from ‘./index.js’.

const p1 = new Person(‘James’).

console.log(p1); // 👉️ Person {first: ‘James’}

console.log(site); // 👉️ bobbyhadz.com

Make sure to specify the extension of the file in your import statements.

Setting the type of property to the module in the package.json file of your project allows you to use ES6 modules in your Node.js application.

Using the older CommonJS syntax instead

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

You can also solve the error by refactoring 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 can import members of other files using require ().

another-file.js

const {Person} = require(‘./index.js’).

Make sure that you haven’t set the type of attribute to module in your package.json file and you don’t have files with a .mjs extension to be able to use the require () syntax.

The error occurs because we aren’t allowed to use the ES6 Modules import/export syntax in Node.js yet.

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

SyntaxError Unexpected Token 'Export'
SyntaxError Unexpected Token ‘Export’

Uncaught SyntaxError Unexpected token ‘export’ in Browser

To solve the error, set the type of your <script /> tags to module.

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>

Setting type to module enables us to use the ES6 modules syntax in the index.js file.

index.js

// 👇️ named export

export class Person {

constructor(first) {

this.first = first.

}

}

// 👇️ named export

export const site = ‘bobbyhadz.com’.

As long as you use set the type of attribute to module when loading your scripts, you can use the ES6 modules syntax.

You can then import the exports in the following way.

another-file.js

// 👇️ named imports

import {Person, site} from ‘./index.js’.

console.log (Person); // 👉️ [class Person]

console.log(site); // 👉️ “bobbyhadz.com”

Note that you have to set the type of 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` on both scripts ✅ –>

<script type=”module” src=”index.js”></script>

<script type=”module” src=”another-file.js”></script>

</body>

</html>

Using named exports and imports

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

This is a file called index.js that has 3 named exports.

index.js

// 👇️ named exports

export class Person {}

export class Animal {}

export const site = ‘bobbyhadz.com’

Now we can import the exports into a file called another-file.js.

another-file.js

// 👇️ named imports

import {Person, Animal, site} from ‘./index.js’.

console.log(site); // 👉️ bobbyhadz.com

And here is an example of a file that uses a default export.

index.js

// 👇️ default export

export default class Person {}

You can have a maximum of 1 default export per file, however, you can have as many named exports as necessary.

Using a default export and import

Here is how we would import the default export.

another-file.js

// 👇️ default import

import Person from ‘./index.js’

Notice that we don’t use curly braces with default imports.

Using both named and default exports and imports

You can also mix and match. This is a file called index.js that uses a default and a named export.

index.js

// 👇️ default export

export default class Person {}

// 👇️ named export

export const age = 30.

And here is how we can import the class and variable into another-file.js.

another-file.js

// 👇️ default and named imports

import Person, {age} from ‘./index.js’

Things to note:

  • Make sure to specify the extension of the file in your import statements.
  • You can have a maximum of 1 default export per file, but you can have as many named exports as necessary.

Conclusion

To solve the “SyntaxError Unexpected token ‘export’ error, make sure:

  • to set type to module in your package.json file in Node.js.
  • to set type to module on your JS script tags in the browser.

Thanks for Reading :)

Enjoyed this post? Share it on social media!

Leave a Feedback!

How to Fix SyntaxError Unexpected Token ‘Export’

by Vibhuti Sawhney time to read: 4 min
0