Solve - Unexpected token 'export' Error in JavaScript

avatar

Borislav Hadzhiev

Tue Oct 19 20213 min read

banner

Photo by KaLisa Veer

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'" error 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're getting 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 the root directory of your application 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 some other file that imports the class.

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.

Alternatively, 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'" error, refactor your code to use the CommonJS syntax, that is 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 you can import the variables in another file like so:

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. 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 import the exports in another file like so:

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

Note that you would also have to set the type attribute to module in your html file.

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 this attribute. No surprise that Internet Explorer does not.

For browser support, check out this table on the caniuse website.

Here are 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 in another file.

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

Hopefully in the future we can use the ES6 modules syntax by default in both Node.js and the browser.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee