How do i enable "@babel/plugin-proposal-decorators" with vite
Solution 1:
Not sure if you're using react but you can add babel plugins via the react plugin described here https://www.npmjs.com/package/@vitejs/plugin-react
The recomended setup seems to require you to rename your files to .ts / .tsx
. However, the following is allowing me to keep the .js / .jsx
extensions.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
// https://www.npmjs.com/package/@vitejs/plugin-react
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
[
"@babel/plugin-proposal-class-properties",
{ loose: true },
],
],
},
}),
],
});
Solution 2:
Vite's react plugin already supports this. Check the docs here https://github.com/vitejs/vite/tree/main/packages/plugin-react#proposed-syntax. You need not install any new packages. The following configuration should work,
import { defineConfig } from 'vite';
import reactSupport from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactSupport({
babel: {
parserOpts: {
plugins: ['decorators-legacy', 'classProperties']
}
}
})],
server: {
port: 3000
}
});