React-MobX Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean

Question

I get the following error: If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of '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
    }
}

Error message says clearly what's wrong. It's unclear what tsconfig.json has to do with this. You wouldn't have this problem if Typescript were used to transpile decorators. — Estus Flask, Nov 09 '18 at 17:55
@estus I am using babel as a transpiler and not Typescript. Can you please provide a solution as per babel? Thank you! — KNIGHT MAHAJAN, Nov 09 '18 at 19:41
The solution is to use legacy decorators. See https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy#babel--7x . — Estus Flask, Nov 09 '18 at 19:57

Mpho Majenge · Accepted Answer · 2019-02-06T11:51:49.050

The error message is a little bit confusing however with some little bit deep searching, you can resolve it using the following approach.

I make no assumptions, except that you are using webpack in this guide.

You need to add babel proposal decorators to your dev dependencies (You only need it during dev time) (which you have added already).

if using yarn

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

otheriwse for npm

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

then in your package.json file, locate babel config section or add one if not there. The config name is strictly "babel".

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

Pay extra attention to the indentation if typing it by hand. notice the object "@babel/plugin-proposal-decorators" is deeply nested inside two arrays, so it has to be as such to work.

and just for sanity check, your devDependencies would at a minimum be as

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

Now you can build your application with either yarn or npm and live happily ever after.

@rlandster thanks for the solution. It's working like a charm now! — KNIGHT MAHAJAN, Nov 10 '18 at 13:21
Typo in yarn and npm install commands: bable, should be babel. — Dashu, Nov 10 '18 at 14:38
this worked perfectly, but please note you want to edit `package.json`, not `package.js` :) — Casey L, Feb 02 '19 at 19:10
@SlugFrisco thank you for picking that up, I've updated the answer to reflect the correct filename. — Mpho Majenge, Feb 06 '19 at 11:52

score 4 · Answer 2 · answered Jun 17 '19 at 11:32

React native 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

Source: https://github.com/facebook/react-native/issues/20588#issuecomment-448218111

score 1 · Answer 3 · answered Dec 02 '18 at 11:42

1

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

answered Dec 02 '18 at 11:42

李海双

11
1

this config in .babelrc successfully solved my problem – 李海双 Dec 02 '18 at 11:49

score 1 · Answer 4 · edited Jan 24 '19 at 11:42

1

"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"
}

edited Jan 24 '19 at 11:42

Robert

5,191
43
59
113

answered Jan 24 '19 at 11:23

sergey andriyaka

9
2

LIU YUE · Answer 5 · 2020-05-06T02:03:15.103

Answer are in the official document: https://mobx.js.org/best/decorators.html

you can find many ways to enable it in section "Enabling decorator syntax"

take the Babel 7 for example, create a project using mobx+create-react-app from scratch:

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

edit package.json: package.json:

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

install mobx:

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

enjoy!

React-MobX Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean

5 Answers5

Linked