Vite — How to Fix „Uncaught SyntaxError: Unexpected token 'export‘“

We started using Vite to bundle our frontend JavaScript. Vite is a modern, fast tool to build and serve frontend assets. It’s a solid choice when working with a framework like Vue.js or React.

Yet, we fought the „Unexpected token export” error. It told us that the export keyword isn’t available when importing the bundled JavaScript into the browser.

This tutorial shows you how we fixed it!

Vite Series Overview

Fixing „Unexpected token ‚export‘“ in the Browser

Vite creates a modern bundle using ECMAScript modules. All modern browsers support ECMAScript modules. Using modules in your bundled JavaScript requires you to tell the browser that the referenced script is of type “module”:

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

    <!-- ✅ set this script’s type to `module` -->
    <script type="module" src="/assets/app.js"></script>

Using type="module" on the <script> tag solved the „Unexpected token export” error. The browser runs the imported JavaScript without issues. Awesome!

Mentioned Resources

Explore the Library

Find interesting tutorials and solutions for your problems.