vuejs / vue-class-component

ES / TypeScript decorator for class-style Vue components.
MIT License
5.81k stars 429 forks source link

Testing with basic app created using VueCLI receive error #486

Closed mikeerickson closed 3 years ago

mikeerickson commented 3 years ago

I am trying to use this with fresh app created using VueCLI and am running into the following error. I can't track down where this setting needs to be applied to the .eslintrc.js file (the default one created by VueCLI)

If you want to reproduce, simply create a fresh project using VueCLI (using default eslint, etc.)

$ vue create test

Then install vue-class-component and use the sample .vue component from docs

Produces the following error


 ERROR  Failed to compile with 1 errors                                                                                                                                                                                    2:09:12 PM

 error  in ./src/components/ClassTest.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/mikee/Documents/code/litterbox/component-decorator/src/components/ClassTest.vue
  16:0  error  Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

   6 | // Define the component in class-style
   7 | @Component
>  8 | export default class Counter extends Vue {
     | ^
   9 |     // Class properties will be component data
  10 |     count = 0
  11 | 

✖ 1 problem (1 error, 0 warnings)
ktsn commented 3 years ago

This is unrelated to this lib but eslint config generated by vue cli. Please open an issue in vue cli repo.

mikeerickson commented 3 years ago

While I am sure nobody else will come here for this issue, I figured I would share what adjustment I had to make to the eslintrc.js setting to remove the error. I just had to add the legacyDecorators: true option as below and all was happy

  ...
  parserOptions: {
    parser: "babel-eslint",
    ecmaFeatures: {
      legacyDecorators: true
    }
  }
  ...