Vue 3 TypeScript - Problem with `App.vue` in `main.ts` and Tests

Question

I'm using TypeScript with Vue and I'm facing this error from my main.ts file.

Here's my shims-vue.d.ts file:

/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue";
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

My App.vue is just a simple template without any script or style:

<template lang="pug">
router-view
</template>

I do not want to do the "noImplicitAny": false in tsconfig.js, so is there any solution to this problem apart from that?

Also, same thing happens in test cases,

import { shallowMount } from "@vue/test-utils";
import Layout from "@/plugin/layout/Layout.vue";

describe("Layout.vue", () => {
    it("renders props.msg when passed", () => {
        const wrapper = shallowMount(Layout);
        expect(wrapper.text()).toMatch("sidebar");
    });
});

Error is:

Answer 1

The reason for the error is that you named your vue file App.vue.js.

The solution: rename App.vue.js to App.vue