Latest version of heroicons breaks build using Vue3 with vite

[Hugo01]

I'm using Vue3 with typescript, Vite, tailwind and heroicons to build an application. Everything was working fine untill the latest version was released, I can't tell for sure which one it is but on my package.json I have "@heroicons/vue": "^1.0.4",

When I try to build the application using "yarn build" i get the following error on every icon I'm using on the application "error TS2786: '__VLS_XX' cannot be used as a JSX component."

If i rollback to version 1.0.0 everything goes back to normal

[natemate90]

In my case, it seems to be a problem with vue-tsc peer dependency V0.27.28, that's why I reverted back to Version 0.27.25 (package-lock.json). Don't experience any problems with 1.0.4 after this change.

    "node_modules/vscode-vue-languageservice": {
      "version": "0.27.25",
      "resolved": "https://registry.npmjs.org/vscode-vue-languageservice/-/vscode-vue-languageservice-0.27.25.tgz",
      "integrity": "sha512-UrV49kORXd7yYG4cDNVU2AtI08Tg6PpYxn0dRp9buziIPEmgCd93JYME4Gj/QRHPbrpAIQuySe51FgT4DjJIgg==",
      "dev": true,
      "dependencies": {
        "@volar/code-gen": "^0.27.24",
        "@volar/html2pug": "^0.27.13",
        "@volar/shared": "^0.27.24",
        "@volar/source-map": "^0.27.24",
        "@volar/transforms": "^0.27.24",
        "@vscode/emmet-helper": "^2.7.0",
        "@vue/compiler-dom": "^3.2.19",
        "@vue/reactivity": "^3.2.19",
        "@vue/shared": "^3.2.19",
        "request-light": "^0.5.4",
        "upath": "^2.0.1",
        "vscode-css-languageservice": "^5.1.4",
        "vscode-html-languageservice": "^4.0.7",
        "vscode-json-languageservice": "^4.1.7",
        "vscode-languageserver": "^8.0.0-next.2",
        "vscode-languageserver-textdocument": "^1.0.1",
        "vscode-pug-languageservice": "^0.27.24",
        "vscode-typescript-languageservice": "^0.27.25"
      }
    },

[Michael-J-Ward]

That fix did not work for me.

This is my vscode error dialogue; the RenderFunction maybe means its related to #322

'__VLS_16' cannot be used as a JSX component.
  Its return type 'VNodeChild' is not a valid JSX element.ts(2786)
(property) BeakerIcon: RenderFunction

[mcastilho]

I am getting the same thing. If I pin to 0.27.25 it works. But since Volar extension in VSCode uses the latest 0.27.30, there are errors whenever HeroIcons are used in a template. When pinning to 0.27.25 at least the build works.

[Michael-J-Ward]

Ah, my error was from the volar vscode extension, which separately needs to be pinned to 0.27.25.

Another build workaround is to pin "vue-tsc": "0.2.2".

I believe the root source is one of these two

• https://github.com/johnsoncodehk/volar/issues/552#issuecomment-933272267
• https://github.com/johnsoncodehk/volar/issues/568

[bradlc]

I might be wrong but this seems like a vue-tsc issue to me, and I have opened an issue over on the volar repo. Will leave this issue open until we can get to the bottom of it 👍

[tauzN]

This seems to be fixed as of Volar 0.28.1 https://github.com/johnsoncodehk/volar/issues/574

[zmwangx]

Should be fixed by #549.

[reinink]

Hey folks, sounds like this has been fixed (https://github.com/johnsoncodehk/volar/issues/574), so I'm going to close this issue 👍