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:

Does the error occur only inside tests? What command do you run to get error? vue-cli build or vue-cli test? — jblew
– jblew, Commented Jan 28, 2022 at 20:46
Did you try to add script to App? They aren't necessarily the same errors, it could be that Jest can't resolve @/ — Estus Flask
– Estus Flask, Commented Jan 28, 2022 at 20:48
This problem appears in both App.vue while starting the app in development environment, and while running the tests using vue-cli-service test:unit. — bacon-delight
– bacon-delight, Commented Jan 28, 2022 at 20:49
And I tried with the relative path as well instead of @, that didn't seem to work either. — bacon-delight
– bacon-delight, Commented Jan 28, 2022 at 20:51

jblew · Accepted Answer · 2022-01-28 20:20:20Z

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

answered Jan 28, 2022 at 20:20

jblew

5633 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bacon-delight Over a year ago

No, the file name is App.vue only. I'm not sure why the App.vue.js error comes.

jblew Over a year ago

Ah, that was my mistake. Sure, webpack aliases the file to *.vue.js

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related