当我尝试在我的 React 应用程序上使用 mobx 工具时，不支持实验性语法 'decorators-legacy 并显示错误

Question

嘿，我一直在尝试将@observer 添加到我的 React 组件中，但出现了此错误：Support for the experimental syntax 'decorators-legacy' isn't currently enabled 以下是我已采取的步骤：

1.npm install mobx --save 和 npm i mobx mobx-react --save

尝试使用 observable 无效
已添加

[ 要求（'@babel/plugin-proposal-decorators'）。默认， { 遗产：真实 } ],

没有用所以我删除了它

在根目录创建.babelrc并添加

{ “预设”：[“本机反应”]， “插件”：[ [ "@babel/plugin-proposal-decorators", { “遗产”：真实 } ] ] }

仍然无法正常工作

编辑中：

我按照你刚才说的做了，同样的错误：

当我 npm start -- --reset-cache 时，这出现在我的终端上，也许它可能有帮助：

Emitted 'error' event at:
    at Server.WebSocketServer._onServerError (/Users/red/mApp/node_modules/ws/lib/WebSocketServer.js:82:50)
    at Server.emit (events.js:202:15)
    at emitErrorNT (net.js:1283:8)
    at processTicksAndRejections (internal/process/next_tick.js:76:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mapp@0.0.1 start: `node node_modules/react-native/local-cli/cli.js start "--reset-cache"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mapp@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Package.json 文件

{
  "name": "mapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.2",
    "babel-plugin-mobx-deep-action": "^1.6.1",
    "jetifier": "^1.6.3",
    "jsc-android": "241213.x.x",
    "mobx": "^5.11.0",
    "mobx-react": "^6.1.1",
    "react": "16.8.3",
    "react-native": "^0.59.10",
    "react-native-background-fetch": "^2.6.0",
    "react-native-background-geolocation": "^3.0.7",
    "react-native-css-gradient": "^0.3.1",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-ionicons": "^4.5.6",
    "react-native-linear-gradient": "react-native-community/react-native-linear-gradient",
    "react-native-maps": "^0.24.2",
    "react-native-responsive-screen": "^1.2.2",
    "react-native-svg": "^9.5.2",
    "react-native-svg-transformer": "^0.13.0",
    "react-native-vector-icons": "^6.5.0",
    "react-native-vertical-tab-view": "^0.1.3",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/runtime": "7.4.5",
    "babel-jest": "24.8.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.3",
    "redux-devtools": "^3.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

您必须在 babel.config.js

中添加 plugin-proposal-decorators

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
};

添加"babel-preset-react-native": "4.0.0",并重置缓存

Answer 2

{
  "name": "mapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.2",
    "babel-plugin-mobx-deep-action": "^1.6.1",
    "jetifier": "^1.6.3",
    "jsc-android": "241213.x.x",
    "mobx": "^5.11.0",
    "mobx-react": "^6.1.1",
    "react": "16.8.3",
    "react-native": "^0.59.10",
    "react-native-background-fetch": "^2.6.0",
    "react-native-background-geolocation": "^3.0.7",
    "react-native-css-gradient": "^0.3.1",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-ionicons": "^4.5.6",
    "react-native-linear-gradient": "react-native-community/react-native-linear-gradient",
    "react-native-maps": "^0.24.2",
    "react-native-responsive-screen": "^1.2.2",
    "react-native-svg": "^9.5.2",
    "react-native-svg-transformer": "^0.13.0",
    "react-native-vector-icons": "^6.5.0",
    "react-native-vertical-tab-view": "^0.1.3",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/runtime": "7.4.5",
    "babel-jest": "24.8.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.3",
    "redux-devtools": "^3.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

当我尝试在我的 React 应用程序上使用 mobx 工具时，不支持实验性语法 'decorators-legacy 并显示错误

the experimental syntax 'decorators-legacy is not supported and shows an error when i try to use mobx tools on my react app

plugins

babeljs

react-native

mobx