Issue importing SVG from a different package

[maurocasas]

Hello there!

I have a simple test to validate how the SVG loader works, and I'm running this line:

import HomeMinor from '@shopify/polaris-icons/dist/svg/HomeMinor.svg';

And when Vite builds I get [vite] Internal server error: Missing "./dist/svg/HomeMinor.svg" export in "@shopify/polaris-icons" package

I don't fully understand what's happening, as the file path is indeed correct, but it's prepending ./ to the path

🤔

Am I doing anything wrong here and I'm not seeing it?

Appreciate the time and effort 🙏 Best M

[jpkleemans]

Hi, thanks for your question. I think this is because @shopify/polaris-icons/dist has an index.js file that has an exports, which "overwrites" the normal exports of that folder. This is a known issue in Vite, see https://github.com/vitejs/vite/issues/1505

[maurocasas]

Thank you @jpkleemans ! I've decided to copy-paste the icons in a folder for the time being

[gkatsanos]

Hi @jpkleemans , We're also importing a component that imports 'external' svg icons (icons that live in another node_module) and I get

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/close.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/menu.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/account.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/arrow-down.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/wlw-conversations.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/wlw-connect.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/logout-1.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/check-badge.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/magazine.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/shared/wlw_logo.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/globe.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/button-play-1.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/arrow-circle-right.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/add.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/book-open.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/email-action-open.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: component
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/account.svg couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: inline
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/node_modules/@visable-dev/styleguide/dist/images/icons/check.svg?inline couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: component
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/components/VisSearchForm/assets/clear.svg couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: component
Default import type: component

 /Users/gkatsanos/repos/visable/visable-vue/components/VisSearchForm/assets/search.svg couldn't be loaded by vite-svg-loader, fallback to default loader
Import type: component
Default import type: component

they do work when I add ?component though, so I'm not sure what is happening. (some icons have ?inline appended because an old webpack loader)