Skip to main content

How to Resolve "SyntaxError: Unexpected token 'export'/'import'" Error in JavaScript

The SyntaxError: Unexpected token 'export' (and its counterpart, Unexpected token 'import') is a common error in JavaScript that occurs when you try to use the ES Module syntax (import/export) in an environment that is not configured to treat your file as a module. By default, both browsers and Node.js treat JavaScript files as "classic" scripts, where this syntax is not valid.

This guide will explain the fundamental reason this error happens and show you the correct way to solve it by properly configuring your environment in both the browser and Node.js.

The Core Problem: Scripts vs. ES Modules​

The import and export keywords are the foundation of the modern ES Module system, which allows you to split your code into reusable, organized files. However, for a long time, JavaScript did not have a native module system. Files were just "scripts."

  • Classic Script: The default mode. The file is executed in the global scope. It cannot use import or export.
  • ES Module: A special mode. The file has its own scope. It can use import to load other modules and export to expose its own functionality.

The "Unexpected token 'export'" error is the JavaScript engine telling you, "I'm reading this file as a classic script, and I don't know what this export keyword is."

Solution for the Browser: Add type="module" to Your <script> Tag​

To fix this error in a browser environment, you must explicitly tell the browser to treat your JavaScript file as an ES Module.

Example of problem: utils.js:

// Problem: This `export` keyword is invalid in a classic script.
export const myVar = 'Hello, World!';

index.html:

<!-- This will cause the error because `utils.js` is loaded as a classic script. -->
<script src="utils.js"></script>

Error Output:

Uncaught SyntaxError: Unexpected token 'export'

Solution: add the type="module" attribute to your <script> tag in your HTML file.

index.html:

<!-- Correct: This tells the browser to treat the file as an ES Module. -->
<script type="module" src="utils.js"></script>

<!-- If you have another script that imports from `utils.js`, it must also be a module. -->
<script type="module" src="main.js"></script>

main.js:

// Now this is valid because `main.js` is a module.
import { myVar } from './utils.js';

console.log(myVar); // Output: 'Hello, World!'
note

Any file that uses import or export must be loaded with type="module".

Solution for Node.js: Use .mjs or Set "type": "module"​

By default, Node.js treats .js files as CommonJS modules, which use the require() and module.exports syntax. If you want to use the modern import/export syntax, you must explicitly tell Node.js to use the ES Module system.

Example of problem: utils.js:

// Problem: Node.js will throw an error when trying to run this file by default.
export const myVar = 'Hello, World!';

Error Output (when running node utils.js):

SyntaxError: Unexpected token 'export'

Solution: you have two primary options:

This is the most common modern approach. Add this top-level property to your project's package.json file. This tells Node.js to treat all .js files in your project as ES Modules.

package.json:

{
  "name": "my-node-app",
  "version": "1.0.0",
  "type": "module"
}

Now, all .js files in your project can use import and export syntax.

Option B: Use the .mjs File Extension​

If you don't want to change your entire project to ES Modules, you can save individual files with an .mjs extension. Node.js will always interpret .mjs files as ES Modules and .cjs files as CommonJS modules.

utils.mjs:

// This file can now use `export` because of its .mjs extension.
export const myVar = 'Hello, World!';

Conclusion​

The SyntaxError: Unexpected token 'export' error is always a sign that your JavaScript environment is not interpreting your file as an ES Module.

To solve it:

  • In the Browser: Add the type="module" attribute to your <script> tag.
  • In Node.js: Either set "type": "module" in your package.json or rename your files with the .mjs extension.

By correctly configuring your environment, you can take full advantage of the modern, powerful ES Module system.

Table of Contents