Cannot find module 'file.vue' or its corresponding type declarations

[nethriis]

Good morning, Everything was working fine until now, then suddenly, I opened my ./src/router/index.ts file and I got lots of errors telling me for my view imports for my router by example :

import HomeView from '@/views/Home.vue'

I have the error:

Cannot find module '@/views/Home.vue' or its corresponding type declarations.

And the same error in my ./src/main.ts with :

import App from './App.vue'

Only *.vue files are affected Everything was working fine before, I don't know what happened in the meantime.

Here are my TypeScript configuration files: tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.node.json

{
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

I'm on Vue version 3.4.21

[arpadgabor]

Same issue here. Fixed it with allowJs: true in tsconfig, but we're now also seeing "type instantiation is infinitely deep" type of error with Hono, however 1.8.27 works fine.

[nethriis]

Same issue here. Fixed it with allowJs: true in tsconfig, but we're now also seeing "type instantiation is infinitely deep" type of error with Hono, however 1.8.27 works fine.

I'm already on v1.8.27

[DemonQilin]

Same issue. Why did it happen?

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["declarations/**/*.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "lib": ["ES2017", "DOM", "DOM.Iterable"],
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["vitest/globals"]
  }
}

tsconfig.config.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"]
  }
}

tsconfig.vitest.json

{
  "extends": "./tsconfig.app.json",
  "include": ["declarations/**/*.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json"],
  "exclude": [],
  "compilerOptions": {
    "composite": true,
    "types": ["node", "vitest/globals"]
  }
}

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.config.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

[BTBMan]

I noticed that the Vue-official plugin load typescript config file is different from the built-in typescript plugin, If the tsconfig.json has references field, they're loaded in a different order.

I don't know how to explain...

There are two tsconfig files, tsconfig.app.json and tsconfig.vitest.json, they both have "include": ["src"], If the tsconfig.app.json is set before the tsconfig.vitest.json, then open the .ts file, It loaded tsconfig.vitest.json but the .vue file is loaded tsconfig.app.json, If change the order of the references, The config file that .ts file and .vue file are change, too.

[BTBMan]

I find this #2548, But It's not support for v2

[michaelangeloio]

this is also an issue for me

[BTBMan]

@michaelangeloio Set the VSCode settings vue.server.hybridMode to false, That makes the order of loading the tsconfig in .ts and .vue the same.

[EtzBetz]

I also have this issue in JetBrains WebStorm

[catgoose]

I fixed this by creating src/vue.d.ts with:

declare module '*.vue';

[davidmatter]

Closing this one as many things have changed since 2.x. Feel free to create a new issue with a minimal reproduction if you're still having issues, thanks!