DEV Community

Cover image for ECMAScript decorators with Vite
Kiran Mantha
Kiran Mantha

Posted on

ECMAScript decorators with Vite

I felt very happy when i saw the progress on bringing typescript decorators to vanillajs. I thought to give it a try in my vanillajs + vite application and bammmmm 💥 it broke 🤯 🙇‍♂️.

ESbuild, which comes with OOB of vite, doesn't support decorators yet 🙄 🤷

That only left me the option to go for babel but i don't want to get away from my love, vite 🥺

Then i found the vite-plugin-babel package and made few changes to vite config. It worked wohooooo 🤩

Here's the config:

import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';

export default defineConfig({
  base: "./",
  plugins: [
      babelConfig: {
        babelrc: false,
        configFile: false,
        plugins: [
            { loose: true, version: "2022-03" },
  server: {
    host: true,
    port: 3001,
    open: "/",
Enter fullscreen mode Exit fullscreen mode

That's it. This resolved my issue and i happily went on using decorators in javascript.

FYI, decorator proposal is in stage3 and one step behind of getting finalized.

Thanks for the read,
Kiran 👋 👋

Top comments (3)

przyb profile image
Jakub Przyborowski

Hi @kiranmantha, Kuba here from the team behind this tiny plugin. Thanks for using vite-plugin-babel and spreading a good word about it! :) Cheers! 🙌

naucode profile image
Al - Naucode

Great article, you got my follow, keep writing!

kiranmantha profile image
Kiran Mantha

Thanks alot @naubit . 😊