Please use `export @dec class` instead #662

mstruensee · 2018-07-23T18:31:24Z

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

The text was updated successfully, but these errors were encountered:

Mati365 · 2018-08-16T11:49:33Z

bump, any changes?

nicolo-ribaudo · 2018-08-28T12:54:52Z

You can use the old decorators proposal:

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

clayrisser · 2018-09-02T22:16:16Z

@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 · 2018-09-02T22:23:40Z

@codejamninja You have a typo: legacyDecotators => legacyDecorators

clayrisser · 2018-09-02T22:35:15Z

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

clayrisser · 2018-09-02T22:37:30Z

That fixed it 👍

Zhxhh · 2018-09-06T06:30:38Z

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

clayrisser · 2018-09-06T06:32:40Z

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

Zhxhh · 2018-09-06T06:50:52Z

@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 · 2018-09-06T09:39:21Z

@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 · 2018-09-06T21:35:59Z

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

clayrisser · 2018-09-06T21:37:27Z

@Zhxhh maybe you should add the babel-eslint parser

.eslintrc

{
  "parser": "babel-eslint"
}

cseelus · 2018-10-15T14:26:15Z

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 · 2018-10-15T15:25:24Z

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

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

cseelus · 2018-10-16T11:33:14Z

@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 · 2018-11-02T08:48:43Z

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 · 2019-01-30T09:00:10Z

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 · 2019-02-01T12:51:24Z

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 · 2019-02-01T12:57:44Z

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

RWOverdijk · 2019-02-01T13:12:14Z

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

hzoo · 2019-02-01T17:34:18Z

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

Kritika-Agrawal · 2019-06-19T13:05:39Z

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 · 2019-09-02T11:13:42Z

@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 · 2019-10-14T16:07:26Z

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 · 2019-10-21T22:03:30Z

decorators

When this thing is written

yoyo837 mentioned this issue Aug 29, 2018

请兼容babel-eslint新版本 sorrycc/roadhog#800

Open

sobolevn mentioned this issue Sep 8, 2018

babel-eslint now uses different decorators wemake-services/wemake-vue-template#759

Closed

SebastienGllmt mentioned this issue Nov 6, 2018

Fix flow bugs Emurgo/yoroi-frontend#91

Merged

hzoo closed this as completed Feb 1, 2019

Kritika-Agrawal mentioned this issue Jun 19, 2019

Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead #774

Closed

vagusX mentioned this issue Dec 3, 2019

babylon Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead ant-design/codemod-v4#23

Closed

renovate bot mentioned this issue Jun 6, 2021

Update dependency eslint-config-synacor to v3 Skyprx/preact#4

Open

1 task

sdykae mentioned this issue Apr 12, 2022

Decorators break completion graphql/graphiql#2294

Closed

fanksy mentioned this issue Jun 9, 2024

【Help】Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead caoccao/swc4j#3

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Please use `export @dec class` instead #662

Please use `export @dec class` instead #662

mstruensee commented Jul 23, 2018

Mati365 commented Aug 16, 2018

nicolo-ribaudo commented Aug 28, 2018 •

edited

Loading

clayrisser commented Sep 2, 2018

loganfsmyth commented Sep 2, 2018

clayrisser commented Sep 2, 2018

clayrisser commented Sep 2, 2018

Zhxhh commented Sep 6, 2018

clayrisser commented Sep 6, 2018

Zhxhh commented Sep 6, 2018

bederuijter commented Sep 6, 2018 •

edited

Loading

clayrisser commented Sep 6, 2018

clayrisser commented Sep 6, 2018 •

edited

Loading

cseelus commented Oct 15, 2018

Mati365 commented Oct 15, 2018 •

edited

Loading

cseelus commented Oct 16, 2018

zsjun commented Nov 2, 2018

doubaozia commented Jan 30, 2019

RWOverdijk commented Feb 1, 2019

nicolo-ribaudo commented Feb 1, 2019 •

edited

Loading

RWOverdijk commented Feb 1, 2019

hzoo commented Feb 1, 2019

Kritika-Agrawal commented Jun 19, 2019

fongfai commented Sep 2, 2019

antoniobrandao commented Oct 14, 2019 •

edited

Loading

nitinAct commented Oct 21, 2019

Please use export @dec class instead #662

Please use export @dec class instead #662

Comments

mstruensee commented Jul 23, 2018

Mati365 commented Aug 16, 2018

nicolo-ribaudo commented Aug 28, 2018 • edited Loading

clayrisser commented Sep 2, 2018

loganfsmyth commented Sep 2, 2018

clayrisser commented Sep 2, 2018

clayrisser commented Sep 2, 2018

Zhxhh commented Sep 6, 2018

clayrisser commented Sep 6, 2018

Zhxhh commented Sep 6, 2018

bederuijter commented Sep 6, 2018 • edited Loading

clayrisser commented Sep 6, 2018

clayrisser commented Sep 6, 2018 • edited Loading

cseelus commented Oct 15, 2018

Mati365 commented Oct 15, 2018 • edited Loading

cseelus commented Oct 16, 2018

zsjun commented Nov 2, 2018

doubaozia commented Jan 30, 2019

RWOverdijk commented Feb 1, 2019

nicolo-ribaudo commented Feb 1, 2019 • edited Loading

RWOverdijk commented Feb 1, 2019

hzoo commented Feb 1, 2019

Kritika-Agrawal commented Jun 19, 2019

fongfai commented Sep 2, 2019

antoniobrandao commented Oct 14, 2019 • edited Loading

nitinAct commented Oct 21, 2019

Please use `export @dec class` instead #662

Please use `export @dec class` instead #662

nicolo-ribaudo commented Aug 28, 2018 •

edited

Loading

bederuijter commented Sep 6, 2018 •

edited

Loading

clayrisser commented Sep 6, 2018 •

edited

Loading

Mati365 commented Oct 15, 2018 •

edited

Loading

nicolo-ribaudo commented Feb 1, 2019 •

edited

Loading

antoniobrandao commented Oct 14, 2019 •

edited

Loading