React-MobX 错误：'decorators' 插件需要一个 'decoratorsBeforeExport' 选项，其值必须是布尔值

Posted 2023-02-23

【中文标题】React-MobX 错误：\'decorators\' 插件需要一个 \'decoratorsBeforeExport\' 选项，其值必须是布尔值

【英文标题】：React-MobX Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a booleanReact-MobX 错误：'decorators' 插件需要一个 'decoratorsBeforeExport' 选项，其值必须是布尔值

【发布时间】：2019-04-13 07:55:51

【问题描述】：

我收到以下错误：如果您从 Babylon/Babel 6 迁移或想要使用旧的装饰器提案，您应该使用“decorators-legacy”插件而不是“decorators”。

package.json

"@babel/plugin-proposal-decorators": 
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz",
      "integrity": "sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q==",
      "requires": 
        "@babel/helper-plugin-utils": "^7.0.0",
        "@babel/helper-replace-supers": "^7.1.0",
        "@babel/helper-split-export-declaration": "^7.0.0",
        "@babel/plugin-syntax-decorators": "^7.1.0"
      
    ,

 "@babel/plugin-syntax-decorators": 
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz",
      "integrity": "sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ==",
      "requires": 
        "@babel/helper-plugin-utils": "^7.0.0"
      
    ,

"babel-plugin-syntax-decorators": 
      "version": "6.13.0",
      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
      "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
      "dev": true
    ,
    "babel-plugin-transform-decorators-legacy": 
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.5.tgz",
      "integrity": "sha512-jYHwjzRXRelYQ1uGm353zNzf3QmtdCfvJbuYTZ4gKveK7M9H1fs3a5AKdY1JUDl0z97E30ukORW1dzhWvsabtA==",
      "dev": true,
      "requires": 
        "babel-plugin-syntax-decorators": "^6.1.18",
        "babel-runtime": "^6.2.0",
        "babel-template": "^6.3.0"
      
    ,
"requires": 
     "@babel/plugin-proposal-decorators": "7.1.2",

tsconfig.json

    "compilerOptions": 
        "experimentalDecorators": true,
        "allowJs": true
    

【问题讨论】：

错误信息清楚地说明了问题所在。目前尚不清楚 tsconfig.json 与此有什么关系。如果使用 Typescript 转译装饰器，就不会出现这个问题。

@estus 我使用 babel 作为转译器，而不是 Typescript。你能按照babel提供一个解决方案吗？谢谢！

解决方案是使用遗留装饰器。见github.com/loganfsmyth/…。

【参考方案1】：

答案在官方文档中： https://mobx.js.org/best/decorators.html

您可以在“启用装饰器语法”部分中找到许多启用它的方法

以 Babel 7 为例，使用 mobx+create-react-app 从头创建项目：

npx create-react-app hello-mobx

//This moves files around and makes your app’s configuration accessible.
npm run eject

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

编辑 package.json： 包.json：

"babel": 
  "plugins":[
    [
      "@babel/plugin-proposal-decorators",
      
        "legacy":true
      
    ],
    [
      "@babel/plugin-proposal-class-properties",
      
        "loose":true
      
    ]
  ],
  "presets":[
    "react-app"
  ]

安装 mobx：

npm install mobx --save
npm install mobx-react --save

享受吧！

【参考方案2】：

反应原生 0.59

babel.config.js：

 
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
        ["@babel/plugin-transform-flow-strip-types"],
        ["@babel/plugin-proposal-decorators",  "legacy": true],
        ["@babel/plugin-proposal-class-properties",  "loose": true]
    ]

---

npm install @babel/plugin-transform-flow-strip-types @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save

---

来源：https://github.com/facebook/react-native/issues/20588#issuecomment-448218111

【参考方案3】：

错误消息有点混乱，但是通过一些深入的搜索，您可以使用以下方法解决它。

除了您在本指南中使用 webpack 之外，我不做任何假设。

您需要将 babel 提案装饰器添加到您的开发依赖项中（您只在开发时需要它）（您已经添加了）。

如果使用纱线

yarn add --dev @babel/plugin-proposal-decorators 

其他的 npm

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

然后在你的 package.json 文件中，找到 babel config 部分，如果不存在则添加一个。配置名称严格来说是“babel”。

  "babel": 
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        
          "legacy": true
        
      ]
    ]
  

如果手动输入，请特别注意缩进。请注意对象"@babel/plugin-proposal-decorators" 深深嵌套在两个数组中，所以它必须这样才能工作。

仅出于健全性检查，您的 devDependencies 至少应为

  "devDependencies": 
    "@babel/plugin-proposal-decorators": "^7.1.2"
  

现在您可以使用 yarn 或 npm 构建您的应用程序，从此过上幸福的生活。

【讨论】：

@rlandster 感谢您的解决方案。它现在就像一个魅力！

yarn 和 npm install 命令中的错字：bable，应该是 babel。

这很好用，但请注意您要编辑package.json，而不是package.js :)

@SlugFrisco 谢谢你接受这个，我已经更新了答案以反映正确的文件名。

【参考方案4】：

"babel": 
   "presets": [
     "react-app"
   ],
  "plugins": [
  [
    "@babel/plugin-proposal-decorators",
    
      "legacy": true
    
  ],
  [
    "@babel/plugin-proposal-class-properties",
    
      "loose": true
    
   ]
  ]
 ,
 "devDependencies": 
 "@babel/plugin-proposal-decorators": "^7.3.0"

【参考方案5】：

 "presets": ['@babel/preset-env', '@babel/preset-react'],
 "plugins": [
  ["import",  "libraryName": "antd", "libraryDirectory": "es", "style": "less" ],
  [
    "@babel/plugin-proposal-decorators",
    
      "decoratorsBeforeExport":true
    
  ]
 ]

【讨论】：

.babelrc 中的这个配置成功解决了我的问题