Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't find icons after vite start with .vue ending

See original GitHub issue

I tried to import my icons via the following two ways:

import IconStatusBlocked from '/@vite-icons/ph/hand.vue';

and

import IconStatusBlocked from 'virtual:vite-icons/ph/hand.vue';

To get TS support I added .vue to my imports which worked fine while the vite-server was running, but after a restart of vite I get this error:

 > html:/home/***.vue:3:30: error: Do not know how to load path: html:@vite-icons/ph/hand
    3 │ import IconStatusBlocked from 'virtual:vite-icons/ph/hand.vue';
      ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > html:/home/***.vue:8:30: error: Do not know how to load path: html:@vite-icons/ph/hourglass
    8 │ import IconStatusPending from 'virtual:vite-icons/ph/hourglass.vue';
      ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 16 errors:
html:/home/***.vue:3:25: error: Do not know how to load path: html:@vite-icons/ic/sharp-timelapse
html:/home/***.vue:4:22: error: Do not know how to load path: html:@vite-icons/mdi/clock-time-eight-outline
html:/home/***.vue:5:23: error: Do not know how to load path: html:@vite-icons/mdi/source-branch
html:/home/***.vue:6:23: error: Do not know how to load path: html:@vite-icons/mdi/source-commit
html:/home/***.vue:3:30: error: Do not know how to load path: html:@vite-icons/ph/hand
...
    at failureErrorWithLog (/home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:1449:15)
    at /home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (/home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:921:63)
    at buildResponseToResult (/home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:1129:7)
    at /home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:1236:14
    at /home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (/home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (/home/***/node_modules/.pnpm/esbuild@0.12.15/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (events.js:315:20)
    at Socket.EventEmitter.emit (domain.js:467:12)
 ERROR  Command failed with exit code 1.

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

antfucommented, Aug 4, 2021

Can you share a minimal reproduction? Thanks.

0reactions

antfucommented, Aug 30, 2021

Close for now. Feel free to reopen if it still persists.

Top Results From Across the Web

vue.js - vuetify icon not showing

I want to add an icon but it is not working as expected (not rendered). How can I fix this? Please refer to...

[vite] error while updating dependencies - Access is denied

error: Failed to write to output file: open D:\git\project\node_modules\.cache\vite\client\vue-feather-icons.js: Access is denied.

Introducing Vite: A Better Vue CLI?

Vite represents a quick, easy-to-use environment that doesn't require long builds to get started with a project. Although it's not a perfect ...

How to Migrate from Vue CLI to Vite

The approach also means that Hot Module Replacement remains fast no matter the size of the application since the entire bundle doesn't have...

Troubleshooting

Error: Cannot find module 'C:\foo\bar&baz\vite\bin\vite.js' #. The path to your project folder may include & , which doesn't work with npm on Windows ......