如何使用 vite 启用“@babel/plugin-proposal-decorators”

Question

 > src/App.jsx:22:0: error: Unexpected "@"
    22 │ @observer

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.

Answer 1

No, you can't. Have to wait for this issue resolved: https://github.com/vitejs/vite/issues/2238

Answer 2

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 },
                    ],
                ],
            },
        }),
    ],
});

Answer 3

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
  }
});

Answer 4

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']
            }
        }),
        // ...
    ],

    // ...
})

Answer 5

The documentation as of today has a section for exactly this, as well as a code snippet.

react({
  babel: {
    parserOpts: {
      plugins: ['decorators-legacy']
    }
  }
})