Cannot resolve alias in template when using Pug

[aasdkl]

When I start to use pug, this plugin throw a resolve error.

1. app pug support

   npm install pug --save-dev
   #or
   yarn add -D pug

2. App.vue here:

<template lang="pug">
img(alt="Vue logo" src="@/assets/logo.png")
</template>

3. tsconfig.json here:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

4. vite.config.ts here:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  base: "/CheckingBoard/",
  server: {
    open: true,
  },
  plugins: [vue(), tsconfigPaths({ loose: true })],
});

5. error here:

[vite] Internal server error: Failed to resolve import "@/assets/logo.png" from "src\App.vue?vue&type=template&lang.js". Does the file exist?
  Plugin: vite:import-analysis
  File: S:/workplace/CheckingBoard/src/App.vue?vue&type=template&lang.js
  1  |  import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"       
  2  |  import _imports_0 from '@/assets/logo.png'
     |                          ^
  3  |  
  4  |  
      at formatError (S:\workplace\CheckingBoard\node_modules\vite\dist\node\chunks\dep-36bf480c.js:50163:46)
      at TransformContext.error (S:\workplace\CheckingBoard\node_modules\vite\dist\node\chunks\dep-36bf480c.js:50159:19)
      at normalizeUrl (S:\workplace\CheckingBoard\node_modules\vite\dist\node\chunks\dep-36bf480c.js:75881:26)
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async TransformContext.transform (S:\workplace\CheckingBoard\node_modules\vite\dist\node\chunks\dep-36bf480c.js:76016:57)
      at async Object.transform (S:\workplace\CheckingBoard\node_modules\vite\dist\node\chunks\dep-36bf480c.js:50373:30)
      at async transformRequest (S:\workplace\CheckingBoard\node_modules\vite\dist\node\chunks\dep-36bf480c.js:65414:29)
      at async viteTransformMiddleware (S:\workplace\CheckingBoard\node_modules\vite\dist\node\chunks\dep-36bf480c.js:65542:32)

---

I'm not sure if it is possible to fix easily.

ref: https://github.com/aleclarson/vite-tsconfig-paths/blob/master/src/index.ts#L113

I found that if using HTML, the importer here is:

S:/workplace/CheckingBoard/src/App.vue

When set lang="pug", the importer will change to:

S:/workplace/CheckingBoard/src/App.vue?vue&type=template&lang.js

To temporary fix the problem, update the include in tsconfig.json:

-"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.js"]

[aleclarson]

Fixed in v3.3.15