create-react-app + mobx其中@observer装饰器报错

Mehoo
  • 91

用官方脚手架搭建项目,用到mobx里面的 装饰器会报错,工具是webstorm,怎么处理?
图片描述

图片描述

我在网上找的是要npm i --save-dev babel-plugin-transform-decorators-legacy
需要编辑.babelrc 文件但是默认是找不到的,需要运行 eject,我运行eject命令之后,项目就彻底报错启动不起来了,貌似提示要更新什么,但是不成功。想问问有什么其他的解决办法吗

评论
阅读 10k
4 个回答

在create-react-app中使用装饰器

create-react-app ExampleApp
npm run eject

//非react
npm install --save-dev babel-plugin-transform-decorators-legacy

//针对react
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev
npm install --save mobx mobx-react

根目录下创建.babelrc

// react
{
  "presets": ["react-native-stage-0/decorator-support"]
}

// 非react
{
  "presets": [
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

npm install --save-dev babel-plugin-transform-decorators-legacy

然后在node_modules/babel-preset-react-app/index.js plugins中添加
require.resolve('babel-plugin-transform-decorators-legacy')

有两种方式:
1.运行eject修改,就是1楼所说的方式,不再赘述
2.使用react-app-rewired,如下

npm install  customize-cra react-app-rewired @babel/plugin-proposal-decorators --save

项目根目录新建config-overrides.js文件加入以下代码:

const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
 addDecoratorsLegacy()
 );

修改package.json文件如下:

"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
 "eject": "react-app-rewired eject"
  },

重启就可以了

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏