How I Integrated Web Workers in a Vite Project (and What Broke Along the Way)
Intro:
I recently needed to offload heavy validations to a Web Worker in a TypeScript project using Vite. It sounded simple — but turned into a series of unexpected challenges.
In this post, I’ll walk you through the process, errors I encountered, and lessons learned.
The Problem:
Vite compiles TypeScript beautifully, but adding Web Workers isn’t automatic. I needed workers for CPU-heavy work without freezing the UI.
First Attempts (and Failures):
- Used new Worker(‘./worker.ts’) — build failed.
- Tried import.meta.url — dev server error.
Example:
const worker = new Worker(new URL(‘./worker.ts’, import.meta.url));Error:
Uncaught TypeError: Cannot read property ‘url’ of undefined“At this point, I wondered if workers were even worth it…”
Get Abhishek Gowda’s stories in your inbox
Join Medium for free to get updates from this writer.
Breakthrough:
• Discovered vite-plugin-worker.
• Installed and configured it.
• Worker finally bundled and loaded successfully.
import Worker from './worker?worker';
const worker = new Worker();Lessons Learned:
• Don’t trust dev builds — production build may behave differently.
• Plugins matter — Vite needs help with non-standard workflows.
• Document errors immediately to avoid repeating mistakes.
Conclusion:
“If you’re adding Web Workers to a Vite project, don’t panic when import.meta.url fails — you’re not alone.
With the right tools, it’s completely doable.”
