title: Module parse failed: Unexpected character '@' Vue Class-Bassed
body: <p>After running commend <code>nmp run serve</code> on my vue project I'm getting this two error. I am using class based vue like in this <a href="https://www.youtube.com/watch?v=u8lMkgb-8iA" rel="nofollow noreferrer">tutorial</a>. This error occurred for all my vue imported files. I am a new in a vue, and I don't understand why this error happening, I have <code>&quot;vue-class-component&quot;: &quot;^7.2.6&quot;, &quot;vue-property-decorator&quot;: &quot;^9.0.2&quot;,</code> like in this tutorial and I are also importing this in my app.vue file. Author do not have this error on his video, I can find an article about this error on the internet</p>
  <p>my main problem is this error</p>
  <p><code>Module parse failed: Unexpected character '@' Vue Class-Bassed</code></p>
  <p>and</p>
  <p><code>11:0  error  Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.</code></p>
  <pre><code>&gt; hero_iii_js@0.1.0 serve C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js
  &gt; vue-cli-service serve
  
   INFO  Starting development server...
  98% after emitting CopyPlugin
  
   ERROR  Failed to compile with 3 errors                                                                                                                                                                 13:37:33
   error  in ./src/App.vue
  
  Module Error (from ./node_modules/eslint-loader/index.js):
  
  C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js\src\App.vue
     8:14  error  Replace `'ts'` with `&quot;ts&quot;`  prettier/prettier
    16:14  error  Delete `,`                  prettier/prettier
    17:4   error  Delete `,`                  prettier/prettier
  
  ✖ 3 problems (3 errors, 0 warnings)
    3 errors and 0 warnings potentially fixable with the `--fix` option.
  
  
   @ ./src/main.js 6:0-28 10:13-16
   @ multi (webpack)-dev-server/client?http://192.168.43.30:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
   error  in ./src/components/boardTest.vue
  
  Module Error (from ./node_modules/eslint-loader/index.js):
  
  C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js\src\components\boardTest.vue
    11:0  error  Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.
  
     5 | import Point from &quot;./point.vue&quot;;
     6 | @Component
  &gt;  7 | export default class BoardTest extends Vue {
       | ^
     8 |   board = new Board();
     9 |   creature = new Creature();
    10 |   unitTestPoint = 1;
  
  ✖ 1 problem (1 error, 0 warnings)
  
  
   @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&amp;type=script&amp;lang=ts&amp; 11:0-51 16:4-13
   @ ./src/App.vue?vue&amp;type=script&amp;lang=ts&amp;
   @ ./src/App.vue
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.43.30:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
   error  in ./src/components/boardTest.vue?vue&amp;type=script&amp;lang=ts&amp;
  
  Module parse failed: Unexpected character '@' (10:0)
  File was processed with these loaders:
  PS C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js&gt; npm run serve
  
  &gt; hero_iii_js@0.1.0 serve C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js
  &gt; vue-cli-service serve
  
   INFO  Starting development server...
  98% after emitting CopyPlugin
  
   ERROR  Failed to compile with 1 errors                                                                                                                                                                 13:46:14
   error  in ./src/components/boardTest.vue?vue&amp;type=script&amp;lang=ts&amp;
  
  Module parse failed: Unexpected character '@' (10:0)
  File was processed with these loaders:
   * ./node_modules/cache-loader/dist/cjs.js
   * ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | import Point from &quot;./point.vue&quot;;
  |
  &gt; @Component
  | export default class BoardTest extends Vue {
  |   board = new Board();
  
   @ ./src/components/boardTest.vue?vue&amp;type=script&amp;lang=ts&amp; 1:0-178 1:194-197 1:199-374 1:199-374
   @ ./src/components/boardTest.vue
   @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&amp;type=script&amp;lang=ts&amp;
   @ ./src/App.vue?vue&amp;type=script&amp;lang=ts&amp;
   @ ./src/App.vue
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.43.30:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
  </code></pre>
  <p>point.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/template&gt;
  &lt;script lang='ts'&gt;
  import { Vue, Component } from &quot;vue-property-decorator&quot;;
  @Component
  export default class Point extends Vue {
    x;
    y;
    created(aX, aY) {
      this.x = aX;
      this.y = aY;
    }
  }
  &lt;/script&gt;
  &lt;style&gt;&lt;/style&gt;
  </code></pre>
  <p>boardTest.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/template&gt;
  &lt;script lang='ts'&gt;
  import { Vue, Component } from &quot;vue-property-decorator&quot;;
  import Creature from &quot;./creature.vue&quot;;
  import Board from &quot;./board.vue&quot;;
  import Point from &quot;./point.vue&quot;;
  
  @Component
  export default class BoardTest extends Vue {
    board = new Board();
    creature = new Creature();
    unitTestPoint = new Point();
  
    mapShouldHaveKeyAndValue() {
      this.board.add(this.unitTestPoint, this.creature);
  
      if (this.board.getVal(this.unitTestPoint) === undefined) {
        throw &quot;Exception: =&gt; Creature dla tego pola zwraca undefined&quot;;
      }
    }
  }
  &lt;/script&gt;
  &lt;style&gt;&lt;/style&gt;
  </code></pre>
  <p>App.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;unitTests /&gt;
      &lt;BoardTest /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang='ts'&gt;
  import unitTests from &quot;./components/unitTests.vue&quot;;
  import { Component, Vue } from &quot;vue-property-decorator&quot;;
  import BoardTest from &quot;./components/boardTest.vue&quot;;
  export default {
    name: &quot;App&quot;,
    components: {
      unitTests,
      BoardTest,
    },
  };
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  
  </code></pre>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;hero_iii_js&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;
    },
    &quot;dependencies&quot;: {
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;vue&quot;: &quot;^2.6.11&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^6.15.0&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.1.4&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^6.2.2&quot;,
      &quot;vue-class-component&quot;: &quot;^7.2.6&quot;,
      &quot;vue-property-decorator&quot;: &quot;^9.0.2&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.11&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;root&quot;: true,
      &quot;env&quot;: {
        &quot;node&quot;: true
      },
      &quot;extends&quot;: [
        &quot;plugin:vue/recommended&quot;,
        &quot;plugin:prettier/recommended&quot;,
        &quot;eslint:recommended&quot;
      ],
      &quot;parserOptions&quot;: {
        &quot;parser&quot;: &quot;babel-eslint&quot;
    },
     &quot;rules&quot;: {
          &quot;no-unused-vars&quot;: &quot;off&quot;
      }
    },
    &quot;browserslist&quot;: [
      &quot;&gt; 1%&quot;,
      &quot;last 2 versions&quot;,
      &quot;not dead&quot;
    ]
  }
  
  </code></pre>