A little while ago, I set up a vue project using vue init webpack . and everything was running smoothly.
Recently, I decided to incorporate typescript and ts-loader. I created a file in the src directory with the following content:
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
I also added a tsconfig.json file:
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"sourceMap": true,
},
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
In addition, I renamed both the main.js file and the router/index.js file to have a ".ts" extension instead of ".js."
For the webpack setup, I made several additions/modifications:
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
ts: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
}
}
},
{
test: /\.ts$/,
loader: 'ts-loader'
},
I also included some changes for ts-loader, and updated configurations for vue-loader within the webpack config found at build/webpack.base.conf.js.
When running npm run dev, there were no errors, but a few warnings popped up.
The main issue arises from the file located at src/components/HelloWorld.vue:
<template>
<div class="hello">
<h2>Essential Links</h2>
{{message}}
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default class AppTest extends Vue {
message: string = 'Hello!'
}
</script>
[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
I've tried various solutions to rectify this issue by adjusting the configuration settings, but so far nothing has resolved it.
If anyone has any insights or suggestions on how to solve this, your help would be greatly appreciated!