Skip to content

fix: added adapter to fix the SSR Icon missing error #527

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rastuhacode wants to merge 2 commits into
base: main
Choose a base branch
from
+51 −5
Open

fix: added adapter to fix the SSR Icon missing error #527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
85e9d7b
fix: added adapter to fix the SSR Icon missing error
rastuhacode Aug 12, 2026
13c4573
fix: remove event fetch form setFecth chain
rastuhacode Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions playgrounds/nuxt5/test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ async function waitForServer() {
try {
await waitForServer()

const page = await fetchWithTimeout(origin)
assert.equal(page.status, 200)
const pageHtml = await page.text()
assert.match(pageHtml, /class="iconify i-ph:acorn-bold"/)
assert.match(pageHtml, /data:image\/svg\+xml/)

const bundled = await fetchWithTimeout(`${origin}/api/_nuxt_icon/ph.json?icons=acorn-bold`)
assert.equal(bundled.status, 200)
const bundledData = await bundled.json()
Expand Down
14 changes: 9 additions & 5 deletions src/runtime/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,15 @@ export default defineNuxtPlugin({
setup() {
const configs = useRuntimeConfig()
const options = useAppConfig().icon as NuxtIconRuntimeOptions
const $fetch = useRequestFetch()
const requestFetch = useRequestFetch()
const nativeFetch = (requestFetch as { native?: typeof globalThis.fetch }).native

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore type incompatible
_api.setFetch($fetch.native)
_api.setFetch((input, init) => {
const nitroFetch = (globalThis as typeof globalThis & {
$fetch?: { native?: typeof globalThis.fetch }
}).$fetch?.native
return (nativeFetch || nitroFetch || globalThis.fetch)(input, init)
})
Comment on lines +14 to +19

@benjamincanac benjamincanac Aug 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this branch never actually runs, iconify does its fetching from a setTimeout so by the time this callback fires tryUseNuxtApp() returns undefined and it always ends up on globalThis.$fetch.native. What worked for me is grabbing the event at setup instead:

const event = import.meta.server ? useRequestEvent() : undefined

_api.setFetch(
  event?.fetch
  || requestFetch.native
  || globalThis.$fetch?.native
  || globalThis.fetch,
)

@rastuhacode rastuhacode Aug 16, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! Thank you for a review!

I double checked and yes, you are correct that it is a dead branch. On the other hand I think your setup grab theoritically can create another issue.

As the _api.setFetch() writes to Iconify's module-level variable the scheduled processes might call wrong event.fetch:

let fetchModule

function setFetch(fetch) {
  fetchModule = fetch
}

Consider the case:

  1. Request A runs plugin setup and installs eventA.fetch. Iconify schedules A's icon request with setTimeout
  2. Request B runs plugin setup and installs eventB.fetch
  3. A's timer executes, but Iconify now calls eventB.fetch instead of correct eventA.fetch

While it would work in the most cases, it can forward wrong cookies, headers, middleware's context, etc.

I may be wrong though - I'm not proficient in nuxt codebases, so I would listen to your recommendations, but I thought that this should be mentioned before continuing.

If this is an issue though, I guess correct approach is just remove the event lookup and use native, as I haven't find approach how can we safely get event.fetch without changing Iconify's fetch module configuration.

Am I right to consider this an issue?


const resources: string[] = []
if (options.provider === 'server') {
Expand All @@ -33,7 +37,7 @@ export default defineNuxtPlugin({

async function customIconLoader(icons: string[], prefix: string): Promise<IconifyJSON | null> {
try {
const data = await $fetch(resources[0] + '/' + prefix + '.json', {
const data = await requestFetch(resources[0] + '/' + prefix + '.json', {
query: {
icons: icons.join(','),
},
Expand Down
3 changes: 3 additions & 0 deletions test/fixtures/ssr-runtime/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<Icon name="ph:acorn-bold" />
</template>
11 changes: 11 additions & 0 deletions test/fixtures/ssr-runtime/nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Module from '../../../src/module'

export default defineNuxtConfig({
modules: [Module],
icon: {
fallbackToApi: false,
serverBundle: {
collections: ['ph'],
},
},
})
22 changes: 22 additions & 0 deletions test/ssr.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
import { fetch, getServerLogs, setup } from '@nuxt/test-utils/e2e'

describe('SSR runtime icon loading', async () => {
await setup({
rootDir: fileURLToPath(new URL('./fixtures/ssr-runtime', import.meta.url)),
build: true,
server: true,
browser: false,
})

it('renders icons from the local server provider', async () => {
const response = await fetch('/')
const html = await response.text()

expect(response.status).toBe(200)
expect(html).toContain('class="iconify i-ph:acorn-bold"')
expect(html).toContain('data:image/svg+xml')
expect(getServerLogs().join('\n')).not.toContain('[Icon] failed to load icon')
})
})