Do you have trouble with the issue Unexpected token ‘export’ Error in JavaScript? Don’t be worried! In this article, we’ll explain what’s affecting it and offer some steps to solve it. Let’s start!

What is the root cause of this error?

This error might happen when the export keyword is used in code that cannot yet handle ES6 module syntax. 

The two most common reasons for these bugs are not setting the script tag type to the module when utilizing the ES6 Module syntax or utilizing the ES6 Module syntax without a type to module in package.json in a Node.js application.

The error will appear as below: 

// Uncaught SyntaxError: Unexpected token 'export'

How to fix an unexpected token ‘export’ error in JavaScript?

There is some information about this specific error. 

When a particular language construct was anticipated but was not provided, the JavaScript error “unexpected token” would appear. It could simply be a misspelling in the scripts. 

Let’s follow some methods below to get the best solution to this bug. 

Method 1: Utilize type Property

Start by iteratively running these commands to choose the type property for the module.

For instance , the command below cause some issue due to ES6 class in Nodejs does not yet support the syntax:

export class User {
constructor(name) {
this.name = name;
}
}
const user = new User('John');
console.log(user);

We fix this bug by replacing “commonjs” to “module” in our package.json file’s “type” property.

{
"name": "my-project",
"version": "1.0.0",
– "type": "commonjs"
+ "type": "module"
}

Step 1: Make a file called package.json with the code below unless you already have it:

npm init -y

Step 2: When the type property is set to “module,” files with js extension are loaded by Nodejs.

This class can now be exported and used in a different file which means the ES6 module syntax can now be utilized in your Nodejs application.

// 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);

Method 2: Utilize Older CommonJS Syntax

You can substitute module.exports for the export keyword in case you’re using an older version that doesn’t support the type property. Your original command should be refactored. Change  “export num = 10;” to “module.exports = {num};”

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

// Using module.exports instead of export
module.exports = {
  Person,
};

Then, using “require()”, we can import the contents of additional files. We will quickly solve the error. 

const {Person} = require('./index.js');

Method 3: Utilize the type attribute of the script element to the module to resolve the error in the browser

Put this script of code in the input to create the calc.js module.

const sum = (a, b) => {
  return a + b;
};

export { sum };

Then, in the script tag, we add another code to import the sum function we exported from calc.js. We set the type property to the module to inform the browser that we can import and export values in the script element. That will resolve the error we encountered before. 

<script type="module">
  import { sum } from "./calc.js";

  console.log(sum(2, 3));
</script>

Conclusion

We really hope that the solution to our page’s unexpected token ‘export’ error in JavaScript was what you were looking for. We also hope that explains the mistake you ran into and, ideally, offers a few more ways to prevent it. Please leave a comment if you have any additional problems with this mistake, and we’ll get back to you as soon as we can! We appreciate your reading.

Read more 

→  Unexpected token import SyntaxError in Node.js – How To Fix It?