React-starter-kit: decorator support

[broncha]

Hi! I am trying to add mobx to a project, I have proper transformer added to my .babelrc, but the compilation keeps failing!

Here is my .babelrc

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/preset-stage-2',
    '@babel/preset-flow',
    '@babel/preset-react',
    "@babel/preset-es2015",
    "@babel/preset-stage-1"
  ],
  plugins: [
    "@babel/plugin-proposal-decorators"
  ],
  ignore: ['node_modules', 'build'],
};

Here is the error

ERROR in ./src/routes/admin/Admin.js
Module build failed: SyntaxError: /WorkSpace/opalcoin/opalweb/src/routes/admin/Admin.js: Support for the experimental syntax 'decorators' isn't currently enabled (16:1):

  14 | import {Provider, observer, inject} from 'mobx-react';
  15 |
> 16 | @observer
     | ^
  17 | @inject("uistore")
  18 | class Admin extends React.Component {
  19 |   static propTypes = {

Add @babel/plugin-proposal-decorators (https://git.io/vb4ST) to the 'plugins' section of your Babel config to enable transformation.
    at _class.raise (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:832:15)
    at _class.expectOnePlugin (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:2229:18)
    at _class.parseDecorator (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:4373:10)
    at _class.parseDecorators (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:4355:28)
    at _class.parseStatement (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:4203:12)
    at _class.parseStatement (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:6998:55)
    at _class.parseBlockOrModuleBlockBody (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:4764:23)
    at _class.parseBlockBody (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:4750:10)
    at _class.parseTopLevel (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:4174:10)
    at _class.parse (/WorkSpace/opalcoin/opalweb/node_modules/@babel/core/node_modules/babylon/lib/index.js:5613:17)
 @ ./src/routes/admin/index.js 13:0-28
 @ ./src/routes/index.js
 @ ./src/router.js
 @ ./src/client.js
 @ multi @babel/polyfill ./tools/lib/webpackHotDevClient ./src/client.js

This does look like a babel issue, but has anyone recently integrated mobx with react-starter-kit? Thanks a lot!

[frenzzy]

Looks like you need this: https://babeljs.io/docs/plugins/transform-decorators/

[broncha]

tried that too. Not working!
Tested the direct cli command too. Both of these dont work!

babel-node --plugins @babel/plugin-proposal-decorators tools/run start
babel-node --plugins transform-decorators tools/run start

[frenzzy]

Have you tried babel-plugin-transform-decorators-legacy?

[broncha]

Oh yes, that too doesn't work!
Master branch of the starter kit uses 7.0.0-beta.36 of babel.
I think this has to do with it. Is it working for you?

[frenzzy]

I do not use decorators @ syntax:

@withStyles(s)
class Component {}
export default Component
// =>
class Component {}
export default withStyles(s)(Component)

[langpavel]

Babel is quite careful/outstanding on decorators. We must wait..
See https://babeljs.io/docs/plugins/transform-decorators

[MikeKoval]

I could make decorators work.

Here my .babelrc.js:

module.exports = {
  ...
  plugins: ['transform-decorators-legacy'],
};

webpack.config.js

....
plugins: [
            'transform-decorators-legacy',
...
]
...

messages.js

...
        plugins: ['react-intl', 'transform-decorators-legacy'],
....

[rodeyseijkens]

I have this in my webpack plugins:

plugins: [
            '@babel/plugin-proposal-decorators',
            // Treat React JSX elements as value types and hoist them to the highest scope
            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
            ...(isDebug ? [] : ['@babel/transform-react-constant-elements']),
            // Replaces the React.createElement function with one that is more optimized for production
            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
            ...(isDebug ? [] : ['@babel/transform-react-inline-elements']),
            // Remove unnecessary React propTypes from the production build
            // https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
            ...(isDebug ? [] : ['transform-react-remove-prop-types']),
          ],

Fork: https://github.com/rodeyseijkens/react-starter-kit/blob/master/tools/webpack.config.js#L107

[laurazenc]

This is what worked for me:

1. Install de same package version as the existing babel's "@babel/plugin-proposal-decorators": "^7.0.0-beta.44"

package.json

"devDependencies": {
    "@babel/core": "7.0.0-beta.44",
    "@babel/node": "7.0.0-beta.44",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.44",
    "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.44",
   ....
}

1. At webpack.config.js, add in first place to the plugins list. Also include the { legacy: true } config

plugins: [
     ['@babel/plugin-proposal-decorators', { legacy: true }],            
     ...(isDebug ? [] : ['@babel/transform-react-constant-elements']),
     ...

Hope this helps!

[BranceLee]

I meet the same trouble, and finally, I find that if you use the _create-react-app_ to create the project, I must to _yarn run eject_ and then, whatever the configured webpack.config.js or the .babelrc or package.json contents can work.

[langpavel]

Personally I made step away from decorators.

New decorators proposal is so bloated — I don't want polyfill.
Old, decorators legacy, are much sparse and OK, but different from which going to be standartised.

CRA will not support decorators until new decorator advance to next stage.

React Starter Kit can allow you to use them, but you should be aware of disadvantages

And one new awesome thing is going to React, hooks, they can be definitely much more usable then HoCs

[broncha]

@langpavel me too. No longer using decorators