uncaught syntaxerror: unexpected token ‘export’: The error “Uncaught SyntaxError Unexpected token ‘export'” happens for two reasons:
- In a Node.js application, using the ES6 Module syntax without specifying a
type to module in package.json.
- Using the ES6 Module syntax in a script without setting the script tag
type to module.
Let us now see an example to understand how the Error occurs in the Node.js application.
index.js:
// Create a class with some parameterized constructor
export class Employ {
constructor(hello) {
// Inside the constructor initialize the variable with the value.
this.hello = hello;
}
}
Output:
export class Employ {
^^^^^^
SyntaxError: Unexpected token export
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
Set the type property in your package.json file to module to resolve the “Uncaught SyntaxError Unexpected token ‘export'” error.
The 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 already have a package.json file, use the below command to create one.
npm init -y
Run the following command from your terminal in the root directory of your application.
shell:
npm init -y
In the package.json file, now set the type property to module
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": "BTechgeeks",
"license": ""
}
You can now use ES6 module syntax in your Node.js application.
index.js:
// Create a class with some parameterized constructor
export class Employ {
constructor(hello) {
// Inside the constructor initialize the variable with the value.
this.hello = hello;
}
}
Here is another file that imports the above class.
anotherFile.js:
// Import the Employ class from the anotherFile.js using
// the import keyword
import {Employ} from './anotherFile.js';
// Create an object for the above Employ class by passing
// some random name as an argument to it and store it in a variable
const e = new Employ('Nick');
// Print the above object
console.log(e);
By setting the type property to module in your project’s package.json file allows us to use ES6 modules in our Node.js application.
If you don’t want to set the type property in your package.json to module, you can use the older CommonJS syntax.
Refactor your code to use the module CommonJS syntax i.e, given below to resolve the “Uncaught SyntaxError Unexpected token ‘export'” issue.
exports = {num}; rather than export num = 500;
index.js:
// Create a class with some parameterized constructor
export class Employ {
constructor(hello) {
// Inside the constructor initialize the variable with the value.
this.hello = hello;
}
}
// Here we use module.exports rather than export to export
// the Employ class
module.exports = {
Employ,
};
Now, the variables can then be imported into another file as follows:
anotherFile.js:
// Import the Employ class from the index.js file using the
// require() function and store it in a variable
const {Employ} = require('./index.js');
Explanation:
- The issue arises because we are not yet allowed to utilize the ES6 Module syntax in Node.js.
- There are multiple solutions, such as using babel to transpile our ES6 code to an earlier/older version of JavaScript or simply refactoring our code to CommonJS syntax.
Fixing Unexpected token ‘export’ Error in JavaScript
Syntaxerror: unexpected token export: Set the type of your <script/> tags to module, to fix the “Uncaught SyntaxError Unexpected token ‘export'” error.
For example:
<script type="module" src="index.js"></script>
All recent browsers have the type=”module” attribute, which allows us to use the ES6 modules syntax.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- adding type as module in the script -->
<script type="module" src="index.js"></script>
</body>
</html>
We can now use the ES6 modules syntax in our index.js file
index.js:
// Create a class with some parameterized constructor
export class Employ {
constructor(hello) {
// Inside the constructor initialize the variable with the value.
this.hello = hello;
}
}
we can utilize the syntax of the ES6 module as long as you specify/set the type attribute to module when loading our scripts.
The exports can then be imported into another file as follows:
anotherFile.js:
// Importing Employ class from the index.js file using the import keyword
import {Employ} from './index.js';
console.log(Employ);
NOTE:
we must also set the type attribute of the anotherFile.js in our html file to module.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- adding type as module in the script -->
<script type="module" src="index.js"></script>
<script type="module" src="another-file.js"></script>
</body>
</html>
This attribute is supported by all current browsers. It’s no surprise that Internet Explorer doesn’t.
Check out this table on the caniuse website for browser support.
The following are some examples of how to use the syntax of the ES6 module with named or default exports.
The Named exports using ES6 modules
index.js:
// Here we export the classes Employ & Website using the export keyword
export class Employ {}
export class Website {}
We are now importing them into another file from the above index.js file.
anotherFile.js:
// Here we are importing the Employ & Website classes from
// the 'index.js' file using the import keyword
import {Employ, Website} from './index.js'
The Default exports using ES6 modules.
Syntaxerror: unexpected token ‘export’: Please keep in mind that each file can only have one default export.
index.js:
export default class Employ {}
We are now importing them into another file from the above index.js file.
anotherFile.js:
// Import the default export class 'Employ' from the
// index.js file using the import keyword
import Employ from './index.js'
We now try to combine and match
index.js:
export default class Employ {}
export const salary = 60000;
We are now importing them into another file from the above index.js file.
anotherFile.js:
import Employ, {salary} from './index.js'
Probably soon, in the future, the syntax of the ES6 module will be used by default in both Node.js and the browser.
