The argument 'hints' must be an array or string of format - after upgrading to rc12 - worked on rc11

Environment

------------------------------
- Operating System: `Darwin`
- Node Version:     `v18.11.0`
- Nuxt Version:     `3.0.0-rc.12`
- Nitro Version:    `0.6.0`
- Package Manager:  `npm@8.19.2`
- Builder:          `vite`
- User Config:      `build`, `buildModules`, `modules`, `publicRuntimeConfig`, `privateRuntimeConfig`, `globalName`, `app`, `intlify`, `http`, `proxy`, `auth`, `tailwindcss`, `googleFonts`
- Runtime Modules:  `@nuxtjs-alt/auth@2.0.20`, `@nuxtjs-alt/http@1.3.18`, `@nuxtjs-alt/proxy@1.3.5`, `@nuxt/content@2.1.1`, `@nuxtjs/tailwindcss@5.3.5`, `@nuxtjs/google-fonts@3.0.0-0`, `@intlify/nuxt3@0.2.4`, `@pinia/nuxt@0.4.3`
- Build Modules:    `@intlify/nuxt3@0.2.4`
------------------------------

Reproduction

Upgrade to nuxt3-rc12 and start app in prod mode (npm run build && npm run start). Error does not appear in dev mode.

Describe the bug

I am getting the following error after upgrading from rc11 to rc12:

The argument 'hints' must be an array or string of format "</styles.css>; rel=preload; as=style". Received '</_application/IBM_Plex_Mono-100-1.52f24bb1.woff2>; rel="prefetch"; as="font"; type="font/woff2"'

Console shows:

Listening http://[::]:3000
[nuxt] [request error] [unhandled] [500] The argument 'hints' must be an array or string of format "</styles.css>; rel=preload; as=style". Received '</_application/IBM_Plex_Mono-100-1.52f24bb1.woff2>; rel="prefetch"; as="font"; type="font/woff2"'
  at new NodeError (node:internal/errors:393:5)  
  at validateLinkHeaderFormat (node:internal/validators:455:11)  
  at validateLinkHeaderValue (node:internal/validators:481:7)  
  at ServerResponse.writeEarlyHints (node:_http_server:314:16)  
  at writeEarlyHints (./.output/server/node_modules/h3/dist/index.mjs:303:22)  
  at ./.output/server/chunks/handlers/renderer.mjs:402:5  
  at async ./.output/server/chunks/handlers/renderer.mjs:59:22  
  at async Object.handler (./.output/server/node_modules/h3/dist/index.mjs:566:19)  
  at async Server.toNodeHandle (./.output/server/node_modules/h3/dist/index.mjs:630:7)

Additional context

nuxt.config.js

import {defineNuxtConfig} from 'nuxt'

export default defineNuxtConfig({
    build: {
        transpile: ['@heroicons/vue', /echarts/, 'resize-detector', 'reflect-metadata', '@headlessui/vue', 'vue-toastification'],
    },
    buildModules: ['@intlify/nuxt3',],
    modules: [
        '@nuxtjs-alt/auth',
        '@nuxtjs-alt/http',
        '@nuxtjs-alt/proxy',
        '@nuxt/content',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/google-fonts',
        '@intlify/nuxt3',
        '@pinia/nuxt',
    ],
    app: {
        buildAssetsDir: '/_application/',
        head: {
            meta: [{
                name: 'viewport',
                content: 'width=device-width,height=device-height,initial-scale=1,maximum-scale=1,shrink-to-fit=no'
            }],
            script: [],
            htmlAttrs: {
                class: 'h-full'
            },
            bodyAttrs: {
                class: 'h-full',
            },
        }
    },
    googleFonts: {
        download: true,
        display: 'auto',
        families: {
            Lato: [100, 300, 500],
            'IBM Plex Mono': [100, 300, 500],
        },
    },
});

Works fine, if I don’t use the google fonts module. But well - in this case my font’s are not loaded correctly 😉

Logs

No response

[anonrig]

This will be resolved with Node 19.1.0

[ahoiroman]

Hi,

using

experimental: {
    writeEarlyHints: false,
  }

solves the issue.