Syntaxerror: unexpected token export

Syntaxerror: unexpected token export

by

The syntaxerror: unexpected token export usually happens when the program’s module may not be compatible with the program’s environment.

In this article, you will learn what this error is all about and why it occurs in your script.

Apart from that, this article provides solutions to fix the syntaxerror: unexpected token ‘export’ error.

Without further ado, let’s get rid of this error and develop your coding expertise!

What is “syntaxerror unexpected token export”?

The error message syntaxerror: unexpected token ‘export’ occurs when you are trying to use the ES6 Module syntax in Node.js application but in an incorrect way.

This is because you are just using it without setting “type”: “module” in your package.json file.

Or when you are using the ES6 Module syntax in a script without setting type=”module” in the script program will definitely be caused an error message:

Uncaught SyntaxError: Unexpected token ‘export’

In addition to that, this error indicates that the JavaScript interpreter has encountered the export keyword in a place where it was not expected.

What is ES6 Module syntax?

The ES6 Module syntax is a way to organize JavaScript code into reusable components. It allows you to split your code into separate modules that can be imported when needed.

This makes it easier to manage large codebases and to share code between different parts of an application.

The use of native JavaScript modules is dependent on the import and export statements.

These statements allow you to specify which parts of a module should be exposed to other parts of the application and which parts should remain private

Why does the “uncaught syntaxerror: unexpected token ‘export’ error occur?

This error occurs if you use the ES6 Module syntax in a Node.js application without adding “type” to your “module” in package.json.

It indicates that the package.json file’s type attribute was not set to “module” in an application.

Here are the two major causes of uncaught syntaxerror unexpected token ‘export’.

1. Uncaught Syntaxerror: using the incorrect ES6 Module syntax in a node.JS Application

Here’s an example code of how the unexpected token export occurs in a Node.js application.


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

To fix the Uncaught Syntaxerror: using the incorrect ES6 Module syntax in a node.JS Application error, here are the following solutions:

Solution 1: Change the “type” property to “module” to your package.json file

You have to change or set the type property to “module” in your package.json file.

When you don’t have a package.json file, you can create one. Open your terminal in your project’s root directory and execute the command below:

✅ npm init -y

After that, you can now set the type property to module in the package.json file.

For example:


✅ {
“type”: “module”,

“name”: “javascript”,

“description”:” “,

// the rest of the code

}

After that, you can able to use the ES6 modules import/export syntax in your Node.js application. You can use the syntax below:

✅ export class Lady{
  constructor(third) {
    this.first = third;
  }
}

As you can see in the above syntax, It is a file called index.js that contains 2 named exports.

Now that you are done analyzing and executing the above steps. This time you have to import the class and variable into a file called another-file.js. using the correct method.

For example:


✅ import {Lady, site} from './index.js';

const p1 = new Lady('Caren');
console.log(p1); 

console.log(site);

Another example:

✅ import {Lady} from ‘./another-file.js’;
const p1 = new Lady(‘Caren’);

console.log(p1);

Note: If you already set the type property to the module of your package.json file in your project. Technically, it will allow you to use ES6 modules in your Node.js application.

Solution 2: Use the older version of  CommonJS syntax

Alternatively, when you don’t want to set the type property to the module to your “package.json.”
There’s another way around solving the Uncaught SyntaxError Unexpected token ‘export’ error message.

You have to refactor your code to use the CommonJS syntax. For instance, use the module.exports = {num}; rather than export num = 20;.

For example:

✅ class Lady{
  constructor(third) {
    this.third = third;
  }
}

module.exports = {
  Lady,
};

After that, you can import members of other files using require() function. You can use the following syntax:

✅ const {Lady} = require(‘./index.js’);

Take note: Ensure you did not set the type attribute to the module in your package.json file. Also, you shouldn’t have files with a .mjs extension that enables to use of the require() syntax.

2. Uncaught syntaxerror: Using the incorrect ES6 module syntax in a script

To fix the uncaught syntaxerror unexpected token ‘export’ error, you have to set the type of <script /> tags to module. For instance <script type=”module” src=”index.js”></script>.

✅ <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>

    <script type="module" src="index.js"></script>
  </body>
</html>

If you set up the type to module allows you to use the ES6 modules syntax in the index.js file.

For example:

✅ import {Lady, site} from './index.js';

console.log(Lady);

console.log(site);

or


✅ export class Lady{

constructor(third) {

this.second = third;

}

}

Note: If you still set the type” attribute to “module” when loading scripts, you can use the syntax of the ES6 module.

For example:

✅ <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>

    <script type="module" src="index.js"></script>
    <script type="module" src="another-file.js"></script>
  </body>
</html>

Use named exports and imports

Here is an example of the file called index.js that includes 3 named exports.

✅export class Lady{}
export class Man{}

export const site = 'bobbyhadz.com'

After that, this time, we can import the exports into a file of another-file.js.

For example:

import Lady, Man, site} from './index.js';

console.log(site)

You can see below the example of the which uses a default export:

✅ export default class Lady {}

Here’s the example code that uses a default export and import:

✅ import Lady from './index.js'

In default import, using curly braces is omitted.

You can see below the file “index.js,” which uses a default and a named export.

✅ export default class Lady{}
export const age = 18;

The example below shows how you can import the class and variable into another-file.js.


✅import Lady{age} from './index.js'

Conclusion

In conclusion, the error message syntaxerror: unexpected token ‘export’ occurs when you are trying to use the ES6 Module syntax in a Node.js application but in an incorrect way.

The two major causes of this error are:

  1. Uncaught Syntaxerror: using the incorrect ES6 Module syntax in a node.JS Application
  2. Uncaught Syntaxerror: Using the incorrect ES6 module syntax in a script

We already discussed above what this error is all about and multiple ways to resolve this error that enable users to use the ES6 module syntax.

By addressing these syntax issues, you can fix this error and let you use your code run smoothly.

We are hoping that this article helps you fix the error. Thank you for reading itsourcecoders 😊

Leave a Comment