fix: Error 400 (Invalid island request hash) while generating image

[aoor9]

🐛 The bug

When attempting to generate the og image, it returns this error:

[18:23:43] [@nuxtjs/og-image]  ERROR  renderer.createImage error for /_og/d/c_OgImageMyOGTakumi,title_Hello,k_og.png?timestamp=1779121422891&colorMode=dark: FetchError: [GET] "/__nuxt_island/OgImageMyOGTakumi_S4o-X9tDyMO1T-S32pg4PqDS7Fc2vfK8OTsps6IM5j0.json?props=%7B%22title%22:%22Hello%22,%22timestamp%22:%221779121422891%22,%22colorMode%22:%22dark%22%7D": 400 Invalid island request hash
    at async $fetch2 (file:///home/user/project/node_modules/.pnpm/ofetch@1.5.1/node_modules/ofetch/dist/shared/ofetch.CWycOUEr.mjs:332:15)
    at async Object.measure (file:///home/user/project/.nuxt/dev/index.mjs:5195:14)
    at async createVNodes (file:///home/user/project/.nuxt/dev/index.mjs:13000:20)
    at async createTakumiNodes (file:///home/user/project/.nuxt/dev/index.mjs:13031:21)
    at async createImage (file:///home/user/project/.nuxt/dev/index.mjs:13329:17)
    at async renderOgImage (file:///home/user/project/.nuxt/dev/index.mjs:14957:13)
    at async Object.imageEventHandler [as handler] (file:///home/user/project/.nuxt/dev/index.mjs:14877:12)
    at async file:///home/user/project/node_modules/.pnpm/h3@1.15.11/node_modules/h3/dist/index.mjs:2017:19
    at async Object.callAsync (file:///home/user/project/node_modules/.pnpm/unctx@2.5.0/node_modules/unctx/dist/index.mjs:72:16)
    at async Server.toNodeHandle (file:///home/user/project/node_modules/.pnpm/h3@1.15.11/node_modules/h3/dist/index.mjs:2316:7)
 ERROR  [request error] [unhandled] [GET] http://localhost:3000/_og/d/c_OgImageMyOGTakumi,title_Hello,k_og.png?timestamp=1779121422891&colorMode=dark                                 18:23:44

 
ℹ Error: [GET] "/__nuxt_island/OgImageMyOGTakumi_S4o-X9tDyMO1T-S32pg4PqDS7Fc2vfK8OTsps6IM5j0.json?props=%7B%22title%22:%22Hello%22,%22timestamp%22:%221779121422891%22,%22colorMode%22:%22dark%22%7D": 400 Invalid island request hash

 ⁃ at async $fetch2 (node_modules/.pnpm/ofetch@1.5.1/node_modules/ofetch/dist/shared/ofetch.CWycOUEr.mjs:332:15)

   327 ┃        return await onError(context);
   328 ┃      }
   329 ┃      return context.response;
   330 ┃    };
   331 ┃    const $fetch = async function $fetch2(request, options) {
 ❯ 332 ┃      const r = await $fetchRaw(request, options);
   333 ┃      return r._data;
   334 ┃    };
   335 ┃    $fetch.raw = $fetchRaw;
   336 ┃    $fetch.native = (...args) => fetch(...args);
   337 ┃    $fetch.create = (defaultOptions = {}, customGlobalOptions = {}) => createFetch({

 ⁃ at async Object.measure (node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/util/timings.js:56:13)
 ⁃ at async createVNodes (node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/og-image/core/vnodes.js:182:19)
 ⁃ at async createTakumiNodes (node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/og-image/takumi/nodes.js:12:20)
 ⁃ at async createImage (node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/og-image/takumi/renderer.js:157:16)
 ⁃ at async renderOgImage (node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/util/eventHandlers.js:139:12)
 ⁃ at async Object.imageEventHandler [as handler] (node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/util/eventHandlers.js:21:11)
 ⁃ (async file://node_modules/.pnpm/h3@1.15.11/node_modules/h3/dist/index.mjs:2017:19)
 ⁃ at async Object.callAsync (node_modules/.pnpm/unctx@2.5.0/node_modules/unctx/dist/index.mjs:72:16)
 ⁃ at async Server.toNodeHandle (node_modules/.pnpm/h3@1.15.11/node_modules/h3/dist/index.mjs:2316:7)

[CAUSE]
FetchError {
  stack: '[GET] "/__nuxt_island/OgImageMyOGTakumi_S4o-X9tDyMO1T-S32pg4PqDS7Fc2vfK8OTsps6IM5j0.json?props=%7B%22title%22:%22Hello%22,%22timestamp%22:%221779121422891%22,%22colorMode%22:%22dark%22%7D": 400 Invalid island request hash\n' +
  'at async $fetch2 (./node_modules/.pnpm/ofetch@1.5.1/node_modules/ofetch/dist/shared/ofetch.CWycOUEr.mjs:332:15)\n' +
  'at async Object.measure (./node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/util/timings.js:56:13)\n' +
  'at async createVNodes (./node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/og-image/core/vnodes.js:182:19)\n' +
  'at async createTakumiNodes (./node_modules/.pnpm/nuxt-og-image@6.5.0_6831afc1e83d6fa40c51a4cfcee153b4/node_modules/nuxt-og-image/dist/runtime/server/og-image/takumi/nodes.js:12:20)\n'... 1051 more characters,
  message: '[GET] 
  "/__nuxt_island/OgImageMyOGTakumi_S4o-X9tDyMO1T-S32pg4PqDS7Fc2vfK8OTsps6IM5j0.json?props=%7B%22title%22:%22Hello%22,%22timestamp%22:%221779121422891%22,%22colorMode%22:%22dark%22%7D": 
  400 Invalid island request hash',
  name: 'FetchError',
  request: [Getter]
  options: [Getter]
  response: [Getter]
  data: [Getter]
  status: [Getter]
  statusCode: [Getter]
  statusText: [Getter]
  statusMessage: [Getter]
}

🛠️ To reproduce

Generate an OG takumi component (pnpm dlx nuxt-og-image create) and embed it in any .vue page; run pnpm dev and open devtools

🌈 Expected behavior

It is supposed to render the image without printing any errors.

ℹ️ Additional context

Environment

• Node: v24.15.0
• Pnpm: v11.1.3

Packages:

• nuxt-og-image: v6.5.0
• Nuxt Seo: v5.1.3
• Nuxt: v4.4.6
• Vue: v3.5.34
• @takumi-rs/core: v1.2.1
• @nuxt/devtools: v3.2.4
• typescript: v5.9.3

[Archetipo95]

After upgrading to Nuxt 4.4.6, we started hitting this during prerender:

• 400 Invalid island request hash

The root cause is a hash mismatch between Nuxt island validation and how nuxt-og-image builds the island request URL.

Quick fix

Run this patch script at prepare/install time to update nuxt-og-image hashing in kit.js:

import { existsSync, readFileSync, readdirSync, writeFileSync } from "node:fs"
import { join } from "node:path"

const pnpmStoreDir = join(process.cwd(), "node_modules", ".pnpm")
const targetSuffix = join(
  "node_modules",
  "nuxt-og-image",
  "dist",
  "runtime",
  "server",
  "util",
  "kit.js",
)

const oldHashLine = '  const hashId = hash([component, props]).replaceAll("_", "-");'
const newHashBlock = `  const filteredProps = Object.fromEntries(
    Object.entries(props || {}).filter(([k]) => !k.startsWith("data-v-"))
  );
  const hashId = hash([component, filteredProps, {}, void 0]).replace(/[-_]/g, "");`

for (const name of existsSync(pnpmStoreDir) ? readdirSync(pnpmStoreDir) : []) {
  if (!name.startsWith("nuxt-og-image@")) continue
  const filePath = join(pnpmStoreDir, name, targetSuffix)
  if (!existsSync(filePath)) continue

  const source = readFileSync(filePath, "utf8")
  if (source.includes("const filteredProps = Object.fromEntries(")) continue
  if (!source.includes(oldHashLine)) continue

  writeFileSync(filePath, source.replace(oldHashLine, newHashBlock))
  console.log("patched", filePath)
}

Add to scripts:

{
  "scripts": {
    "prepare": "node scripts/patch-nuxt-og-image-island-hash.mjs && nuxt prepare",
    "patch:nuxt-og-image": "node scripts/patch-nuxt-og-image-island-hash.mjs"
  }
}

NB this is a temporary workaround until the upstream fix is released. Byeeeeeee!

[harlan-zw]

Thanks, seems like a regression in latest Nuxt version. I've pushed out v6.5.1 with the fix.