Offline package usage breaks for production build - cannot find module @iconify/vue/dist/offline (vite + vue 3)

As there is the already mentioned (SSR issue) with the ‘online’ usage i tried to workaround it with the offline usage. It works perfectly fine for dev server in localhost. But when building or generating the app for production, it says it is not able to find the offline module of iconify. But when i check the node_modules folder it is there.

Usage:

import { Icon } from '@iconify/vue/dist/offline';
import EmailIcon from '@iconify-icons/mdi/email';
import PhoneIcon from '@iconify-icons/mdi/phone';
import CellphoneIcon from '@iconify-icons/mdi/cellphone';

Error message:

awacode@awacode-MBP13 bivignano % npm run generate

> bivignano@0.0.0 generate
> vite build --ssrManifest --outDir dist && npm run build:server && node prerender

vite v2.8.4 building for production...
✓ 108 modules transformed.
dist/assets/OptimusPrinceps.fc66926b.woff   24.65 KiB
dist/assets/OptimusPrinceps.9b8022e9.eot    40.64 KiB
dist/assets/OptimusPrinceps.06728ee9.ttf    40.45 KiB
dist/index.html                             0.99 KiB
dist/ssr-manifest.json                      13.31 KiB
dist/assets/index.79b58e15.js               10.65 KiB / gzip: 4.41 KiB
dist/assets/headline.3936d964.js            0.25 KiB / gzip: 0.20 KiB
dist/assets/index.07a5fe3d.css              2.46 KiB / gzip: 0.96 KiB
dist/assets/vendor.ab91a02e.js              113.06 KiB / gzip: 44.30 KiB

> bivignano@0.0.0 build:server
> vite build --ssr src/entry-server.js --outDir dist/server

vite v2.8.4 building SSR bundle for production...
✓ 21 modules transformed.
dist/server/entry-server.js   29.84 KiB
node:internal/modules/cjs/loader:488
      throw e;
      ^

Error: Cannot find module '/Users/awacode/code/customers/bivignano/vue3/bivignano/node_modules/@iconify/vue/dist/offline'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
    at resolveExports (node:internal/modules/cjs/loader:482:14)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Module.<anonymous> (/Users/awacode/code/customers/bivignano/vue3/bivignano/dist/server/entry-server.js:28:15)
    at Module._compile (node:internal/modules/cjs/loader:1101:14) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/awacode/code/customers/bivignano/vue3/bivignano/node_modules/@iconify/vue/package.json'
}

[cyberalien]

If you want to use offline component, there is an alternative: https://github.com/antfu/unplugin-icons

It is built by one of Vue core developers, uses Iconify for icon data.

My component is more oriented towards downloading icon data on demand, offline version was an attempt to make component without API, but unplugin-icons is much better for it.

[userquin]

@awacode21 since you are using vite you can also check preset icons on unocss, your icons will go to your css, no more sfc for icons.

Preset icons is also using iconify for icon data, and with an extra depedency, preset uno, you will also have tailwind styles, just check the repo: https://github.com/unocss/unocss