Type error when use svg icon with plugin vite-svg-loader

x-wink commented 10 months ago

Describe the bug

import svg with plugin vite-svg-loader it's type should be FunctionalComponent this is ok in vite projects but not work in vitepress it's type is String

Reproduction

https://github.com/x-wink/wink-ui this is my repository throw type error in this file: docs\src\examples\button\use5.vue it's ok in this file: packages\components\select\tag.vue

Expected behavior

just like vite projects

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 Intel(R) Xeon(R) CPU E5-2673 v3 @ 2.40GHz
    Memory: 19.04 GB / 31.86 GB
  Binaries:
    Node: 18.16.0 - D:\nodejs\node.EXE
    npm: 9.5.1 - D:\nodejs\npm.CMD
    pnpm: 8.7.4 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Chrome: bookmarks.html
initial_preferences
    Edge: Chromium (116.0.1938.81)
    Internet Explorer: 11.0.19041.1566

Additional context

exists follow projects in my UI libary momorepo:

docs
icons
components
wink-ui

docs is a vitepress project, dependencie icons and components icons is a vite project with plugin vite-svg-loader components define vue components and dependencie icons wink-ui is a vite project dependencie components, build and emits components

I try to upgrade vitepress to latest version,it's same result.

Validations

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 10 months ago

Where have you used vite-svg-loader in that repo? Please provide a reproducible example and error logs. Also TypeError does not mean an error with TypeScript types.

And that plugin seems to be working fine for me: https://stackblitz.com/edit/vite-xefyjs?file=docs%2Findex.md,docs%2F.vitepress%2Fconfig.ts

x-wink commented 9 months ago

it's work fine, just a ts type error. only compile error not runtime error. maybe is not load `vite-svg-loder`'s d.ts file. your example can't show ts type when mouse hover `import Test from './test.svg'` maybe you can clone my repo to try

https://github.com/x-wink/wink-ui ts type error in vitepress: docs\src\examples\button\use5.vue ok in vite: packages\components\select\tag.vue

pnpm i
pnpm build:icons
pnpm dev

x-wink commented 9 months ago

seuros commented 7 months ago

add /// <reference types="vite-svg-loader" /> in your vite-env.d.ts

vuejs / vitepress