Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams error when starting dev server: Error: Build failed with 1 error: src/App.jsx:22:0: error: Unexpected "@"

I use the observer as a decorator then i got the error. Can not find a place to enable this option in documentation.

Vite's react plugin already supports this. Check the docs here https://github.com/vitejs/vite-plugin-react/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
I made a package called vite-plugin-babel-dev that runs babel during dev part in Vite, if you don't need full react plugin.
Install @babel/plugin-proposal-decorators and use it like this:
import { defineConfig } from 'vite';
import babelDev from 'vite-plugin-babel-dev';
export default defineConfig({
    plugins: [
        babelDev({
            babelConfig: {
                plugin: ['@babel/plugin-proposal-decorators']
        // ...
    // ...
Edit: The package is now called just vite-plugin-babel
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 },
import {defineConfig} from "vite"
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
  build: {
    outDir: 'dist/'
  plugins: [
    vue(),
    vueJsx(
      {babelPlugins: [[
        "@babel/plugin-proposal-decorators",
        { legacy: true },
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.