Nuxt•7mo ago

Nuxt 3.12.1 - Invalid link type image/x-icon in nuxt.config.ts app.head.link

After upgrading to Nuxt 3.12.1 from 3.11.1, one of my app.head.link items has an invalid type:

{
  app: {
    head: {
      link: [
        {
          rel: 'icon',
          type: 'image/x-icon',  // Error TS2322
          href: 'https://example.com/favicon.ico',
        },
      ]
    }
  }
}

{
  app: {
    head: {
      link: [
        {
          rel: 'icon',
          type: 'image/x-icon',  // Error TS2322
          href: 'https://example.com/favicon.ico',
        },
      ]
    }
  }
}

I believe this stems from the use of zhead, which attempts an exhaustive list of valid MIME types as described in this issue: https://github.com/harlan-zw/zhead/issues/23. Given the opportunity for many unsupported MIME types, I suggest that the link type property not attempt an exhaustive list of MIME types.

GitHub

Issues · harlan-zw/zhead

All of the TypeScript definitions for . Contribute to harlan-zw/zhead development by creating an account on GitHub.

2 Replies

Mark BrouchOP•7mo ago

@harlan looping you in to get your thoughts on this 🙏

Mark BrouchOP•7mo ago

W3C specs state that the type attribute must be a valid MIME type string: https://html.spec.whatwg.org/multipage/semantics.html#attr-link-type A valid MIME type string is then defined as: "a string that matches the media-type token production." https://mimesniff.spec.whatwg.org/#valid-mime-type The media-type token production is simply a case-insensitive pair of strings separated by a / with an optional semicolon delimited parameters as key/value pairs separated by =. For example: text/html;charset=utf-8. https://www.rfc-editor.org/rfc/rfc9110#name-media-type Therefore, I think think the appropriate type should be simply string until such time as a regex type is supported in TypeScript.

RFC 9110: HTTP Semantics

The Hypertext Transfer Protocol (HTTP) is a stateless application-level protocol for distributed, collaborative, hypertext information systems. This document describes the overall architecture of HTTP, establishes common terminology, and defines aspects of the protocol that are shared by all versions. In this definition a...

Gaming

Programming

Nuxt 3.12.1 - Invalid link type image/x-icon in nuxt.config.ts app.head.link