Vite rollup "Could not resolve "./icons/RANDOM-icon-name" from "node_modules/@iconscout/vue-unicons/index.js" #24
Description
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.