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

[ahoiroman]

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

[danielroe]

this is resolved in a newer version of h3 (or by not using node 18). probably the google fonts module is pulling in an older version. you can try refreshing your lockfile or manually installing h3 yourself.

[ahoiroman]

Hm, I used npx nuxi@latest upgrade --force and now I deleted node_modules and package-lock.json and reinstalled everything, but the error is still the same.

I added an output of npm list h3:

 ✗ npm list h3
├─┬ @nuxt/content@2.1.1
│ └─┬ unstorage@0.5.6
│   └── h3@0.7.21
└─┬ nuxt@3.0.0-rc.12
  ├─┬ @nuxt/vite-builder@3.0.0-rc.12
  │ └── h3@0.8.4 deduped
  ├── h3@0.8.4
  └─┬ nitropack@0.6.0
    ├── h3@0.8.4 deduped
    └─┬ unstorage@0.6.0
      └── h3@0.8.4 deduped

[danielroe]

Yes, it seems the issue is content, and I'm pretty sure we'll see a new release there soon. cc: @farnabaz

[ahoiroman]

Hm, it still fails with

npm run start

> start
> env-cmd -f ./.env  node .output/server/index.mjs

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)

 npm list h3
├─┬ @nuxt/content@2.2.0
│ └─┬ unstorage@0.6.0
│   └── h3@0.8.4 deduped
└─┬ nuxt@3.0.0-rc.12
  ├─┬ @nuxt/vite-builder@3.0.0-rc.12
  │ └── h3@0.8.4 deduped
  ├── h3@0.8.4
  └─┬ nitropack@0.6.0
    └── h3@0.8.4 deduped

------------------------------
- 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.2.0`, `@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`
------------------------------

I updated nuxt/content and deleted package-lock.json and node_modules.

[toooni]

I've got a similar message The argument 'hints' must be an array or string of format "</styles.css>; rel=preload; as=style". Received '</_nuxt/coupon_discover_1.min.ab3cf506.svg>; rel="prefetch"; as="image"; type="image/svg+xml"' with h3@0.8.4.

[danielroe]

The cause is described here - and should be resolved when the version of h3 in your project is updated. You can try forcibly regenerating your lockfile or installing h3 manually as a workaround.

If that doesn't work, and you have another dependency on h3, please do let me know so we can address in the downstream module/library.

[ahoiroman]

Hi @danielroe

As described, here the issue is not gone after upgrading all h3-dependencies. If I am not mistaken, I am using 0.8.4 everywhere.

[pi0]

@ahoiroman Can you please confirm if disabling early hints fixes the issue with RC.12?

export default defineNuxtConfig({
  experimental: {
    writeEarlyHints: false,
  }
})

[ahoiroman]

Hi,

using

experimental: {
    writeEarlyHints: false,
  }

solves the issue.

[Drillan767]

@pi0 I can confirm it works

[danielroe]

Ah. That's a bug in Node 18 that will be resolved when nodejs/node#44874 is released. For now you will need to use the workaround @pi0 has provided.

[AndrewBogdanovTSS]

@danielroe I'm using Node 19.0.0 but have exactly same issue

[danielroe]

Should have said Node 18+ 😆

[AndrewBogdanovTSS]

@danielroe since it's not available in Node 19, do you know which release will have that fix?

[danielroe]

Likely the next patch release of both 18/19.

[anonrig]

This will be resolved with Node 19.1.0

[danielroe]

This has been released. 🥳

[AndrewBogdanovTSS]

This has been released. 🥳

Does it also mean that experimental flag was set to true by default or it will remain as false?

[danielroe]

No, the default value has not been changed.