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
- How to Fix „Uncaught SyntaxError: Unexpected token 'export‘“
- Resolve `import.meta.glob` in TypeScript
- Create Resolve Aliases for Imports (Like the @ Symbol)
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">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- ✅ set this script’s type to `module` -->
<script type="module" src="/assets/app.js"></script>
</body>
</html>
Using type="module" on the <script> tag solved the „Unexpected token export” error. The browser runs the imported JavaScript without issues. Awesome!