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

Solution 1

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.

Solution 2

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

Solution 3

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

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

View more solutions

Comments

[Estus Flask]

The solution is to use legacy decorators. See github.com/loganfsmyth/… .

[KNIGHT MAHAJAN]

@rlandster thanks for the solution. It's working like a charm now!

[Dashu]

Typo in yarn and npm install commands: bable, should be babel.

[李海双]

this config in .babelrc successfully solved my problem

[Casey L]

this worked perfectly, but please note you want to edit package.json, not package.js :)

[Mpho Majenge]

@SlugFrisco thank you for picking that up, I've updated the answer to reflect the correct filename.