"Cannot find module" when importing .vue files

[dschmidt]

Hello,

I seem to be missing something super obvious, but I can't make @vue/vue3-jest work with TypeScript (while @vue/vue2-jest was working just fine). Whenever I try to import a component from a .vue file, I get errors like

src/main.ts:3:17 - error TS2307: Cannot find module './App.vue' or its corresponding type declarations.

It doesn't matter if it's in the spec file directly or indirectly in a .ts file imported from a spec file.

I've created a minimal example here: https://github.com/dschmidt/vue3-compat You can see the error with: pnpm i && pnpm jest:clean

As I'm currently trying to port an application to Vue 3, I'm collecting a few issues there (and hence the name) but it should be basically as minimal as can be. So far I could not tell that the compatConfig has any influence on this.

Also interesting: it does not seem to make a difference whether the transform is active in the jest config or not. The error does not change. 😕

.. and just for the sake of completeness: vite dev server, vite prod builds and vue-tsc of course don't complain about anything - the issue just occurs when trying to run jest.

Am I messing this up or is something really broken? Thanks in advance!

[dschmidt]

My example project simply was missing the correct type declarations for .vue files.

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

My actual production repo was broken because I was messing with the types for vue-test-utils-compat, which lead to the same errors by chance. I could fix the types in the end, but I couldn't get Vuex 3.x to work with that, so I decided to go for vuex 4.x and VTU2 without comp layer.