Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled

最新推荐文章于 2023-04-11 22:24:15 发布

原创最新推荐文章于 2023-04-11 22:24:15 发布 · 572 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了在使用mobx时遇到@observable装饰器报错的解决步骤，包括安装babel-plugin-transform-decorators-legacy，配置package.json中的babel插件，并提到了yarn和npm的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：使用mobx中的装饰器(@observable)报错

解决方案：

1.安装babel-plugin-transform-decorators-legacy

yarn add babel-plugin-transform-decorators-legacy

或

npm install babel-plugin-transform-decorators-legacy

2.修改配置文件，在package.json babel中加入以下代码


"plugins": [

["@babel/plugin-proposal-decorators", { "legacy": true }]

],

这时你的package.json里可能没有这段代码

"babel": {
    "presets": [
      "react-app"
    ]
  },

那么你需要执行yarn eject 或者 npm run eject，把潜藏在 react- scripts 中的一系列技术栈配置都展示在package.json中。

当你执行完yarn eject会发现控制台报错了，解决方法就是把本地的修改提交了，执行

git init
git add .
git commit -m ''

然后再执行yarn eject,package.json中就会有了label的代码。

--------------------------------------分割线-------------------------------------

新建一个react项目使用mobx

1.新建一个react项目

npx create-react-app mobx-demo

cd mobx-demo

2.安装安装mobx 和mobx-react

yarn add mobx mobx-react

或

npm install mobx mobx-react --save

3.安装babel-plugin-transform-decorators-legacy

yarn add babel-plugin-transform-decorators-legacy

或

npm i babel-plugin-transform-decorators-legacy

4.修改package.json中的babel

"babel": {

"plugins": [

["@babel/plugin-proposal-decorators", { "legacy": true }]

],

"presets": [

"react-app"

]

}

5.yarn和npm区别