Blog

The Unexpected token ‘export’ error is a JavaScript SyntaxError that occurs when the export keyword is used in code that cannot yet process ES6 module syntax. This generally happens because either the code is being run in an environment that does not support ES6 modules (such as Node.js), or because the code is using a different module format that is incompatible with the one being used by the current file.

To fix this error, you will need to either change the ‘type’ property in your package.json file to ‘module’, or use the CommonJS module format instead.

What Causes Unexpected Token ‘export’ Error In JavaScript

To utilize ES6 Module syntax in your code, you must have an environment that supports ESM (Ecmascript Module Syntax).

NodeJS since v14.13.0 enables EcmaScript Module Syntax, but it must be enabled by adding the property “type”:”module” to package.json. By default, NodeJS prior to v14.13.0 uses CommonJS Modular syntax (module.exports) rather than ES6 module syntax (export keyword).

If you are working with legacy code that is written in the CommonJS Modular syntax, then you can use a tool like Babel to convert your code to the proper ES6 module syntax.

Let’s have a look at these solutions below.

1. Fixing Unexpected Token ‘export’ Error In Node.js Using type Property

Here is an example of how this error might occur in Node.js:

export class User {

constructor(name) {

this.name = name;

}

}

const user = new User('John');

console.log(user);

As you can see, we are trying to use an ES6 class in Node.js, which does not yet support the syntax. To fix this, we need to change the ‘type’ property in our package.json file from “commonjs” to “module”:

{

"name": "my-project",

"version": "1.0.0",

– "type": "commonjs"

+ "type": "module"

}

If you don’t have the package.json file, you can create it with the following command:

npm init -y

Files ending with .js are loaded in Node.js when the type property is set to “module”.

Now, you can export this class and use it in another file:

// user.js

export class User {

constructor(name) {

this.name = name;

}

}

// index.js

import { User } from './user.js';

const user = new User('John');

console.log(user);

Named Exports Using ES6 Modules

export class User {}

export class Address {}

Now, you can import these classes in another file:

import { User, Address } from './user.js';

Default Exports using ES6 Modules

export default class User { }

Note that you can only have one default export per file.

Now, you can import these classes in another file:

import User from './user.js';

You can mix and match default and named exports in the same file:

export default class User {}

export class Address {}

Now, you can import these classes in another file:

import User, { Address } from './user.js';

2. Fixing Unexpected Token ‘export’ Error In Node.js Using Older CommonJS Syntax

If you are using Node.js in an older version that does not support the type property, then you can use module.exports instead of the export keyword.

Here is an example:

// user.js

class User {

constructor(name) {

this.name = name;

}

}

module.exports = User;

// index.js

const User = require('./user');

const user = new User('John');

console.log(user);

3. Fixing Unexpected Token ‘export’ Error In Node.js With Babel

If you are using Babel to transpile your code, you can use the babel-plugin-transform-es2015-modules-commonjs plugin to transform your code into the CommonJS module format:

npm install –save-dev babel-plugin-transform-es2015-modules-commonjs

.babelrc:

{

"plugins": ["transform-es2015-modules-commonjs"]

}

This will fix the problem by converting all of your import and export statements into require() and module.exports respectively.

4. Fixing Unexpected Token ‘export’ Error In Browser With type =”module”

If you are loading your code in the browser, you can use the type=”module” attribute on the tag to tell the browser that your code is using ES6 module syntax:

<script type="module">

import { User } from './user.js';

const user = new User('John');

console.log(user);

</script>

Keep in mind that this will only work if your code is being run in a browser that supports ES6 modules (such as Chrome 61+). Also, the type property will also have to be added for the file that is exporting the class.

Here is an HTML with the script tag:

<html>

<body>

<script type="module">

import { User } from './user.js';

const user = new User('John');

console.log(user);

</script>

</body>

</html>

// user.js

<script type="module">

export class User {

constructor(name) {

this.name = name;

}

}</script>

5. Fixing Unexpected Token ‘export’ Error In Browser With Babel

If you want to use ES6 module syntax in older browsers, you can use Babel to transpile your code into the older CommonJS module format:

npm install –save-dev babel-plugin-transform-es2015-modules-commonjs

.babelrc:

{

"plugins": ["transform-es2015-modules-commonjs"]

}

This will fix the problem by converting all of your import and export statements into require() and module.exports respectively.

Conclusion

In this article, you’ve seen how to fix the Unexpected token ‘export’ error in JavaScript. This error can occur in Node.js or in the browser depending on how you are using modules.

If you are using Node.js, make sure you are either using the type property with a value of “module” or that you are using the require() function instead of the import keyword.

In the browser, make sure you are using the type=”module” attribute on the tag or that you are using Babel to transpile your code into older module syntax that is supported by browsers.

Finally, if you are using Babel, make sure you have the babel-plugin-transform-es2015-modules-commonjs plugin installed.