Babel-eslint: Please use `export @dec class` instead

[mstruensee]

I am getting this error using 8.2.2
Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead

switching back to 8.0.0 the error goes away ...

[Mati365]

bump, any changes?

[nicolo-ribaudo]

You can use the old decorators proposal:

{
  parserOptions: {
    ecmaFeatures: {
      legacyDecorators: true
    }
  }
}

[clayrisser]

@nicolo-ribaudo this does not seem to do anything. Here is my babel config.

{
  "extends": ["airbnb", "prettier"],
  "parser": "babel-eslint",
  "globals": {
    "window": true
  },
  "rules": {
    "arrow-body-style": "off",
    "class-methods-use-this": "off",
    "default-case": "off",
    "import/no-dynamic-require": "off",
    "import/no-extraneous-dependencies": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "no-param-reassign": "off",
    "no-plusplus": "off",
    "no-return-assign": "off",
    "no-shadow": "off",
    "no-underscore-dangle": "off",
    "no-use-before-define": "off",
    "react/destructuring-assignment": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/no-this-in-sfc": "off",
    "react/prefer-stateless-function": "off",
    "yoda": "off",
    "no-unused-vars": [
      "warn",
      {
        "args": "after-used",
        "argsIgnorePattern": "^_",
        "ignoreRestSiblings": true,
        "vars": "all"
      }
    ],
    "comma-dangle": ["error", "never"],
    "import/extensions": ["error", "ignorePackages"],
    "import/no-unresolved": [
      "error",
      {
        "ignore": [
          "./stories$",
          "/storiesOf",
          "^native-base",
          "^react-native",
          "^reaction-base",
          "^reation-build",
          "^~"
        ]
      }
    ]
  },
  "parserOptions": {
    "ecmaFeatures": {
      "legacyDecotators": true
    }
  }
}

[loganfsmyth]

@codejamninja You have a typo: legacyDecotators => legacyDecorators

[clayrisser]

Oh my, it's super embarrassing when your GitHub issue is just a typo for the whole world to see. 🥇

[clayrisser]

That fixed it 👍

[Zhxhh]

@nicolo-ribaudo I wonder where should i add the statement?

[clayrisser]

It goes in your .eslintrc file. Here is an example https://github.com/codejamninja/eslint-config-jam/blob/master/src/base.js

[Zhxhh]

@codejamninja THANKS,I didn't use eslint before.However,after I installed it and add .eslintrc file.The error is still happening.....(sad)
here is my .eslintrc file:
'module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2015
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"parserOptions": {
"ecmaFeatures": {
"legacyDecotators": true
}
}
};
'
Here is my .babelrc file
'
{
"presets": ["react-native"],
"plugins": [
"transform-decorators-legacy",
],
}
'

[bederuijter]

@Zhxhh your lint file declares parserOptions twice, up top and at the bottom, combining them in a single block does the trick:

parserOptions: { ecmaVersion: 2015, ecmaFeatures: { legacyDecorators: true } },

[clayrisser]

@Zhxhh can you please use code blocks. It makes it super hard to read your comment.

[clayrisser]

@Zhxhh maybe you should add the babel-eslint parser

_.eslintrc_

{
  "parser": "babel-eslint"
}

[cseelus]

Has anyone here a reference to how the new decorators syntax should be used? Wasn't able to google how one should change something like

import { Foo } from 'bar'

@connect(
  state => …
)

export default class SomeClass extends SomeOtherClass {
  …
}

[Mati365]

Płace expert default before @connect as it is described in eslint warning.

@connect: sorry m8, accidentially. Github mentions sucks xD

[cseelus]

@Mati365 RN 0.57 throws Property body of BlockStatement expected node to be of a type ["Statement"] but instead got "CallExpression" when I place it like that. Will have to use legacyDecorators for now, but thanks anyway.

[zsjun]

you can edit .eslintrc and add
"parserOptions": {
"ecmaFeatures": { "legacyDecorators": true }
},

my .eslintrc file is
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": { "legacyDecorators": true }
},
"env": {
"browser": true
},
"extends": "standard",
"rules": {

}
}

this can fix this problem

[doubaozia]

Has anyone here a reference to how the new decorators syntax should be used? Wasn't able to google how one should change something like

import { Foo } from 'bar'

@connect(
  state => …
)

export default class SomeClass extends SomeOtherClass {
  …
}

It seems that you cannot use connect and export default together. They should be used separated:

import { Foo } from 'bar'

@connect(
  state => …
)
class SomeClass extends SomeOtherClass {
  …
}

export default SomeClass;

[RWOverdijk]

This is confusing to me. The suggestion of using "legacyDecorators": true, works, but isn't a satisfying answer to me.

The reason for that is that I was under the impression that babel-eslint uses babel to apply rules in eslint. In babel, I have configured:

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

Should eslint pick that up when using babel-eslint? Or am I missing the point? (I'm think it might be the latter).

[nicolo-ribaudo]

Only with babel-eslint@11 (which is currently in beta)

[RWOverdijk]

Aaaaaah.... That makes sense. I'll give that a go then :) Thanks!

[hzoo]

I think this issue can be closed then, if you have a different issue please create a new one? thanks!

[Kritika-Agrawal]

I'm facing the issue
here is my .eslintrc.js file :

module.exports = {
plugins: [ 'react' ],
parser: 'babel-eslint',
env: { browser: true, commonjs: true, es6: true },
extends: [ 'eslint:recommended', 'plugin:react/recommended' ],
parserOptions: {
ecmaFeatures: { legacyDecorators: true, experimentalObjectRestSpread: true, jsx: true },
sourceType: 'module'
},
rules: {
'no-var': 'error',
'block-spacing': 'error',
semi: [ 'error', 'never' ],
quotes: [ 'error', 'single' ],
'prefer-arrow-callback': 'error',
'react/no-find-dom-node': 'warn',
'react/no-deprecated' : 'warn',
'linebreak-style': [ 'error', 'unix' ],
indent: [ 'error', 2, { SwitchCase: 1 } ],
'arrow-body-style': ['error', 'as-needed'],
'object-curly-spacing': [ 'error', 'always' ],
'comma-dangle': [ 'error', 'only-multiline' ],
'array-bracket-spacing': [ 'error', 'always' ],
'prefer-destructuring': [
'error', {
'VariableDeclarator': { 'array': false, 'object': true },
'AssignmentExpression': { 'array': true, 'object': false }
}
],
'no-confusing-arrow': [ 'error', {'allowParens': true} ],
'no-console': [ 'error', { allow: [ 'warn', 'error', 'info' ] } ],
'comma-spacing': [ 'error', { before: false, after: true } ],
'no-unused-vars': [
2, {
args: 'all', argsIgnorePattern: '^_', ignoreRestSiblings: true
}
],
}
}

and .babelrc file :
{
"presets":[
"env", "react"
],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties",
"transform-object-rest-spread",
"transform-es2015-arrow-functions",
"transform-decorators"
]

}

[fongfai]

@nicolo-ribaudo this does not seem to do anything. Here is my babel config.

{
  "extends": ["airbnb", "prettier"],
  "parser": "babel-eslint",
  "globals": {
    "window": true
  },
  "rules": {
    "arrow-body-style": "off",
    "class-methods-use-this": "off",
    "default-case": "off",
    "import/no-dynamic-require": "off",
    "import/no-extraneous-dependencies": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "no-param-reassign": "off",
    "no-plusplus": "off",
    "no-return-assign": "off",
    "no-shadow": "off",
    "no-underscore-dangle": "off",
    "no-use-before-define": "off",
    "react/destructuring-assignment": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/no-this-in-sfc": "off",
    "react/prefer-stateless-function": "off",
    "yoda": "off",
    "no-unused-vars": [
      "warn",
      {
        "args": "after-used",
        "argsIgnorePattern": "^_",
        "ignoreRestSiblings": true,
        "vars": "all"
      }
    ],
    "comma-dangle": ["error", "never"],
    "import/extensions": ["error", "ignorePackages"],
    "import/no-unresolved": [
      "error",
      {
        "ignore": [
          "./stories$",
          "/storiesOf",
          "^native-base",
          "^react-native",
          "^reaction-base",
          "^reation-build",
          "^~"
        ]
      }
    ]
  },
  "parserOptions": {
    "ecmaFeatures": {
      "legacyDecotators": true
    }
  }
}

you got a wrong word: legacyDecorators

[antoniobrandao]

This worked for me
(using create-react-app with customize-cra, with decorators enabled)

import React, { Component } from 'react';

export default @connect(
  store => ({
    //...
  }),
  dispatch => ({
    //...
  }),
)
class MyComponent extends Component {
  render() {
    return (
      <div>
        //...
      </div>
    );
  }
}

[nitinAct]

decorators

When this thing is written