tabler-icons icon indicating copy to clipboard operation
tabler-icons copied to clipboard

Exports in `package.json` causing an error using vite.

Open tjarbo opened this issue 2 years ago • 1 comments

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'),
    }
  }
})

tjarbo avatar Mar 04 '22 15:03 tjarbo

Any news on this?

loics2 avatar Aug 11 '22 20:08 loics2