Important Update:
After thorough investigation, it appears that the issue is directly related to the boilerplate being used. As a temporary solution, it is recommended not to extract the TypeScript file but keep it within the .vue file for now.
In a simple Vue test project, I encountered this error:
ERROR Failed to compile with 1 errors
error in ./src/App.ts
Syntax Error: Unexpected token (11:7)
This problem arises in the default project structure generated by running:
vue init Toilal/vue-webpack-template my-project
The specific code causing the error is as follows:
@Component
export default class HelloWorld extends Vue {
@Prop({ default: 'default ToDo' })
todo: string; // unexpected token
name = "test9"; // works fine
}
All other aspects of the project seem to be functioning correctly, and my search for a solution did not reveal any instances where ':' was flagged as an unexpected token. One individual faced a similar issue around two years ago and resolved it by updating their npm version, although I am already using a much newer version.
Here are the dependency sections from my package.json. Could the problem stem from an incompatible combination of libraries?
"dependencies": {
"vue": "^2.5.2",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^6.0.0"
},
"devDependencies": {
// List of dev dependencies
}