Here's an example of a component:
<script setup type="ts">
interface Props {
items: string[]
}
const props = defineProps<Props>();
</script>
<template>
<ul>
<li v-for="item in props.items">
{{ item }}
</li>
</ul>
</template>
I've encountered the following errors:
- TypeScript interface declarations can only be used in TypeScript files.
- An expression was expected but not found.
https://i.sstatic.net/4aJc5CjL.png
The compilation/start process fails with an additional error visible in VS Code:
https://i.sstatic.net/7ogzF0ge.png
Vue official plugin version 2.0.7 is installed.
Here's the content of package.json:
{
"name": "some-project",
"private": true,
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"generate": "vite-ssg build",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@intlify/unplugin-vue-i18n": "^4.0.0",
"dayjs": "^1.11.11",
"element-plus": "^2.6.2",
"oh-vue-icons": "^1.0.0-rc3",
"pinia": "^2.1.7",
"unplugin-auto-import": "^0.18.2",
"unplugin-icons": "^0.19.0",
"vue": "^3.4.21",
"vue-i18n": "^9.13.1",
"vue-router": "^4.4.0"
},
"devDependencies": {
"@iconify-json/ep": "^1.1.15",
"@types/node": "^22.5.1",
"@vitejs/plugin-vue": "^5.0.4",
"sass": "1.77.8",
"typescript": "^5.4.3",
"unocss": "^0.62.3",
"unplugin-vue-components": "^0.27.4",
"vite": "^5.2.5",
"vite-ssg": "^0.23.6",
"vue-tsc": "^2.0.7"
},
"license": "MIT"
}
Can someone help me identify the issue?