When I run the command nmp run serve
on my Vue project, I encounter two errors. I am following a tutorial that uses class-based Vue, but I am facing this error with all my imported Vue files. As a newcomer to Vue, I am puzzled as to why this error is occurring. I have the dependencies like
"vue-class-component": "^7.2.6", "vue-property-decorator": "^9.0.2"
mentioned in the tutorial, and I am importing them in my app.vue file. The author of the tutorial did not face this error in the video, and I cannot find any articles about this particular issue on the internet.
The main issue is:
Module parse failed: Unexpected character '@' Vue Class-Based
and
11:0 error Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e8e5f2efdfe9e9e9dfeaf3c0b0aeb1aeb0">[email protected]</a> serve C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js
> 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 `"ts"` 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&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 "./point.vue";
...
point.vue
<template>
<div></div>
</template>
...
boardTest.vue
<template>
<div></div>
</template>
...
App.vue
<template>
<div>
<unitTests />
<BoardTest />
</div>
</template>
...
package.json
{
"name": "hero_iii_js",
...
}