如何解决MobX-React中的装饰器浏览器语法错误问题？

1. 确认依赖版本 #

先确保安装了适配Vite的MobX及React绑定包：

npm install mobx mobx-react-latest --save

2. 配置Vite支持装饰器语法 #

修改vite.config.js/vite.config.ts，通过Babel或Esbuild开启装饰器支持：

方式一：Babel插件配置（需先安装依赖） #

先安装必要的Babel插件：

npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save-dev

再修改Vite配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: true }]
        ]
      }
    })
  ]
})

方式二：Esbuild原生配置（无需额外依赖） #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  esbuild: {
    supported: {
      'decorators-legacy': true
    }
  }
})

3. 配置MobX与TypeScript（若使用TS） #

如果是TypeScript项目，修改tsconfig.json的编译选项：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "useDefineForClassFields": false, // 关键：避免MobX与类字段语法冲突
    "target": "ESNext",
    "module": "ESNext"
  }
}

4. 确保MobX正确识别装饰器 #

在你的Store类构造函数中，必须调用makeObservable来启用装饰器：

import { makeObservable, observable, computed } from 'mobx'

class EmailStore {
  emailTitle = ''
  inputBody = ''

  constructor() {
    makeObservable(this) // 必须调用此方法，MobX才会解析装饰器
  }

  @computed get emailBody () {
    return generateTemplate(this.emailTitle, this.inputBody);
  };
}

5. 检查浏览器兼容性 #

若构建后仍有问题，可在Vite配置中指定兼容的浏览器版本：

export default defineConfig({
  build: {
    target: 'es2015'
  }
})

内容的提问来源于stack exchange，提问作者Szymon Wysogląd