tabler-icons
tabler-icons copied to clipboard
Exports in `package.json` causing an error using vite.
This issue has the same problem as #153. A good solution would probably resolve both issues at once.
Hi there 👋
I have a problem using this library with vite and vue3. I am getting the following error while running the vite
command:
[vite] Internal server error: Missing "./iconfont/tabler-icons.min.css" export in "@tabler/icons" package
Plugin: vite:import-analysis
File: /workspace/src/main.ts
at bail (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:29925:8)
at resolve (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:29978:7)
at resolveExports (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:30625:12)
at resolveDeepImport (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:30641:26)
at tryNodeResolve (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:30424:20)
at Context.resolveId (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:30241:28)
at Object.resolveId (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:42767:55)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async TransformContext.resolve (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:42566:23)
at async normalizeUrl (/workspace/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:81005:34)
What do I expect?
Within the main.ts
, I want to import the CSS code to access icons like <i class="ti ti-chevron-left"></i>
from everywhere in my code without an additional import or dependency. I expect that this is working in the exact same way like I import the tabler.min.css
file.
main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import '@tabler/core/dist/css/tabler.css';
import '@tabler/core/dist/css/tabler-vendors.css';
import '@tabler/core/dist/js/tabler.min';
import '@tabler/icons/iconfont/tabler-icons.min.css';
createApp(App).use(createPinia()).use(router).mount('#app');
Probably this is the code that causes the error: https://github.com/tabler/tabler-icons/blob/aeb94bc15dfe4fd0d85e3f0f0df52f5147a627d2/package.json#L10-L13
One (definitly non-professional) working solution:
"exports": {
"./iconfont/tabler-icons.min.css": "./iconfont/tabler-icons.min.css",
"import": "./icons-react/dist/index.esm.js",
"require": "./icons-react/dist/index.cjs.js"
},
Functional workaround (vite.config.ts):
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import alias from '@rollup/plugin-alias'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
root: ".",
plugins: [
vue(),
alias()
],
resolve: {
alias: {
'@tabler': resolve(__dirname, 'node_modules', '@tabler'),
}
}
})
Any news on this?