feat: introduce clientBundle.includeCustomCollections option, #34

[antfu]

Introduce clientBundle.includeCustomCollections, which defaults to:

• true when provider is not server - a.k.a ssr: false
• false otherwise

This allows custom collections to live with in the client bundle without network request.

[zigomir]

@antfu I'm trying @nuxt/icon@^1.4.0 via newest @nuxt/ui, v2.18.3 and failing to run build via nuxt generate.

[1:26:03 PM]  ERROR  Nuxt Build Error: [vite:load-fallback] Could not load 
/Users/ziga/development/pulse/frontend/.nuxt/nuxt-icon-client-bundle (imported by 
node_modules/@nuxt/icon/dist/runtime/components/shared.js):
ENOENT: no such file or directory, open '/Users/ziga/development/pulse/frontend/.nuxt/nuxt-icon-client-bundle'

our nuxt.config.tss icon property looks like so:

  ssr: false, // including this because we need exactly the `ssr: false` & `icon.provider: 'server'` combination for our setup
  icon: {
    provider: 'server',
    localApiEndpoint: '/_nuxt_icons',
    customCollections: [
      {
        prefix: 'light',
        dir: './assets/icons/light',
      },
      {
        prefix: 'solid',
        dir: './assets/icons/solid',
      },
      {
        prefix: 'brands',
        dir: './assets/icons/brands',
      },
    ],
    // not including this didn't bundle icons into client, and it still triggered requests to `/_nuxt_icons/light.json?icons=…`
    // including it, fails the build like mentioned above
    clientBundle: {
      includeCustomCollections: true,
    },
  },

[antfu]

@zigomir hey, could you help to create a new issue with a minimal reproduction so I can test out? Thanks

[zigomir]

@antfu https://stackblitz.com/edit/github-lhrb3c?file=nuxt.config.ts,app.vue,package.json

I'm running:

npm run generate && npm run preview

(note: for the first time you'll need to press y and / or Enter to install serve package)

Also, npm run dev only works with clientBundle commented out.

[zigomir]

@antfu thanks, I see it's been fixed with v1.4.2 and or v1.4.3, but that only works for the default, css mode and not for the svg we use.

I added a app.config.ts file to the reproduction and now if you run npm run generate and then npm run preview you'll see no icons are being served and there are 404 responses in the terminal trying to get icon from /_nuxt_icons as set in nuxt config's localApiEndpoint.

[zigomir]

@antfu sorry for spamming, but I've found a workaround that might help you figure out the actual fix much faster than it would take me (btw, playground on this repo helped a lot to find the workaround!).

See this diff: main...zigomir:icon:local-fs-svg-issue-reproduction (or clone https://github.com/zigomir/icon/tree/local-fs-svg-issue-reproduction). The main thing is:

if you set playground/app.config.ts to

import { defineAppConfig } from '#imports'

export default defineAppConfig({
  icon: {
    mode: 'svg',
  },
})

then no custom collection icon will render unless there's one that uses mode="css". So, a workaround to get icons from custom1 collection rendered as svgs (via app config, not explicitly using mode prop), is to add a hidden icon (from any custom collection, though playground only has custom1) and potentially hide it to prevent duplicates.

<Icon
  style="display: none;"
  name="custom1:nuxt-v3"
  size="64"
  mode="css"
/>

[antfu]

@zigomir Please, create a new issue with the information you provided (and you don't need to @ me, I will see it) - this would help us keep track on them easier. We are very unlikely to keep checking comments in a closed/merged pr.