0

I was trying to convert my react project into an electron-app. As the project is bundled via webpack, I began using electron-webpack for the build. When running electron-webpack dev, neither the /main nor the /renderer compiles correctly.

Console logs throw Decorator plugin error 

The decorators plugin requires a 'decoratorsBeforeExport' option,
 whose value must be a boolean. If you want to use the 
legacy decorators semantics, you can set the 'legacy: true' option

Sooo, why not following that wise suggestion?. Then, I updated all my dependencies and update my .babelrc file, for adding the decoratorsBeforeExport and the legacy option (false and true respectively)

"plugins": [
   ["@babel/plugin-proposal-decorators", {
     "decoratorsBeforeExport": false,
     "legacy": true,
   }],

As the Error still showing after that, I open the plugin-proposal-decoratorsfolder from _/node_modules_ and added a log for the options. Apparently, it does not identify my options set. I tried directly from the webpack loader config, but the problem still showing.

My env

  • Node: v11.2.0
  • Webpack: v4.29.0
  • @babel/core: v7.0.0
Andrés Morales
  • 3
  • 4

1 Answers1

0

This .babelrc worked for me:

{
  "presets": [
    "@babel/preset-react",
    [ "@babel/preset-env", {
      "targets": {
        "browsers": [ "last 1 version" ]
      }
    } ]
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}

Mind how decorators plugin comes before class-properties.

Somehow, it didn't work for me in non-legacy mode. loose option is required if decorators runs in legacy mode, according to official docs: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html

It also states:

In Babel 7, transform-decorators-legacy will be the default plugin in Stage-0. (Source: https://babeljs.io/docs/en/babel-plugin-transform-decorators.html)

More info: Babel 7 - Decorators transform doesn't work with babel-loader Simple ES7 decorator with babel

caffeinum
  • 401
  • 5
  • 13