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: [
    babel({
      babelConfig: {
        babelrc: false,
        configFile: false,
        plugins: [
          [
            "@babel/plugin-proposal-decorators",
            { loose: true, version: "2022-03" },
          ],
        ],
      },
    }),
  ],
  server: {
    host: true,
    port: 3001,
    open: "/",
  },
});

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 👋 👋

Comments

[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! 🙌

[Al - Naucode]

Great article, you got my follow, keep writing!

[Kiran Mantha]

Thanks alot @naubit . 😊

[Daria Selezneva]

Cannot start nuxt: Invalid plugin. src option is required: {"name":"babel-plugin","enforce":"pre"}

[Kiran Mantha]

Can you provide me ur git repo.. I'll check it out