When using ts 4.2.4 and Vue3, I encountered a strange error while building my vue project:
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a2a7aeaaededb3a2a0a083f3edf2edf3">[email protected]</a> build
> vue-cli-service build
⠋ Building for production...
ERROR Failed to compile with 1 error 17:36:51
error in src/layout/Main.vue:52:20
TS7016: Could not find a declaration file for module './Footer.vue'. '/Users/ddruganov/VSCodeProjects/admin.pacc/src/layout/Footer.vue.js' implicitly has an 'any' type.
50 | <script lang="ts">
51 | import Topbar from "./Topbar.vue";
> 52 | import Footer from "./Footer.vue";
| ^^^^^^^^^^^^^^
53 | import Sidebar from "./Sidebar.vue";
54 |
55 | import { activityStore, LOAD_ACTIVITIES } from "@/store/modules/activity.store";
ERROR Build failed with errors.
npm ERR! code 1
npm ERR! path /Users/ddruganov/VSCodeProjects/admin.pacc
npm ERR! command failed
npm ERR! command sh -c vue-cli-service build
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ddruganov/.npm/_logs/2021-05-08T14_36_51_736Z-debug.log
Typescript is raising an issue regarding the type of Footer being considered as any, but does not show similar complaints about other .vue components.
Interestingly, VSCode does not flag this as an error:
No squigglies are present for Footer
Here is the code for Footer:
<template>
<footer class="footer bg-light border-top p-3">
<span class="text-muted">{{ fullYear }} pAcc</span>
</footer>
</template>
<script land="ts">
import { Vue } from "vue-class-component";
export default class FooterComponent extends Vue {
get fullYear() {
return new Date().getFullYear();
}
}
</script>
The contents of my shims-vue.d.ts file are as follows:
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}