Vite rollup "Could not resolve "./icons/RANDOM-icon-name" from "node_modules/@iconscout/vue-unicons/index.js"

[elasticdotventures]

I think this problem is specifically related to vue3, typescript, vite. The TLDR is that the index.js exports for this library don't have a .vue extension.

this issue occurs because the node_modules/@iconscout/vue-unicons/index.js file looks like:

export { default as Uil0Plus } from './icons/uil-0-plus'
...

when typescript/vite default config expects a .vue extension:

export { default as Uil0Plus } from './icons/uil-0-plus.vue'

During vite build this will trigger:

Could not resolve "./icons/uil-files-landscapes" from "node_modules/@iconscout/vue-unicons/index.js"

The solution I came up with is a extremly janky, but it works! 😉 .. here is a custom plugin, put it in the vite.config.ts that appends the .vue .. also, there is an odd behavior in the relative path lookup and I'm not sure why/how that happens (but using __dirname fixes that!) .. hope this helps.

// ...
import path from 'path';
import { Plugin } from 'vite';

function customIconPathPlugin(): Plugin {
  /*
  this will fix the issue with vite rollup not finding the iconscout icons
  */
  return {
   name: 'custom-icon-path-plugin',
   resolveId(source) {
     if (source.startsWith('./icons/')) {
       const filePath = path.resolve(__dirname, 'node_modules/@iconscout/vue-unicons', source)+".vue";
       return filePath;
     }
   },
  };
 }


// https://vitejs.dev/config/
export default defineConfig({
  // THEN ADD customIconPathPlugin()
  plugins: [vue(), customIconPathPlugin()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
      },
  }
})

Note: also need to declare types

declare module '@iconscout/vue-unicons' {
  import { DefineComponent } from 'vue';

  // Declare each icon you use as a Vue component
  export const UilVuejs: DefineComponent<{}, {}, any>;

}

I'm sure there are better solutions, so I'll follow cunninghams law and post this working version and hopefully somebody who is better at vite/typescript/et al. .. or perhaps the maintains of iconscout will create a typescript friendly version and close this issue.

[elasticdotventures]

After posting this issue - I immediately noticed this PR #7 👍🏻

[elasticdotventures]

@rankarpan can you please merge PR #7 and close this issue. Thanks!