Typescript typing of both <Head /> components, custom component children #64653

cyrilchapon · 2020-11-14T11:43:28Z

cyrilchapon
Nov 14, 2020

Bug report

Describe the bug

After reading #17721, #6919, and #13230 and the docs here, I just realized after several hours that my wrapping of <link>s in components inside the <Head> (BOTH the document one and the app one) was not working. This is pretty subtle so I'll try to explain the double-bug stuff.

title, meta or any other elements (e.g. script) need to be contained as direct children of the Head element, or wrapped into maximum one level of <React.Fragment> or arrays—otherwise the tags won't be correctly picked up on client-side navigations.

This is a double bug that has the same root :

The Document's Head component (import { Head } from 'next/document') doesn't show the nice warning

Warning: viewport meta tags should not be used in _document.js's . https://err.sh/next.js/no-document-viewport-meta
when a custom component is wrongly passed to it. Furthermore; it works (renders correctly) with a custom-component in this case.

The Typescript type of App's Head component (import Head from 'next/head') accepts a custom component instead of links and stuff. This leads to a runtime bug that could be avoided (I think with narrowing the children type)

To Reproduce

Create a custom component that wraps a link

const ViewportMetaLink = () => (
  <meta
    name='viewport'
    content='minimum-scale=1, initial-scale=1, width=device-width'
  />
)

Try to use it in the Document's head

class Document extends _Document<DocumentInitialProps> {
  render() {
    return (
      <Html>
        <Head>
          <ViewportMetaLink />
        </Head>

        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

(Notice how this just works, without any warning. But has the duplicate-meta-bug Duplicate <meta name="viewport"> if the custom one is defined in _document.js #6919
Remove the previous, and try it in the App's Head

const App = ({ Component, pageProps }: AppProps) => (
  <>
    <Head>
      <ViewportMetaLink />
    </Head>

    <div />
  </>
)

(Notice how the Typescript types allow it; but lead to a runtime error Failed to execute 'createElement' on 'Document' | v9.5.4 #17721 )

Expected behavior

I'd expect to have followed that path at least :

Trying inside Document; having seen the warning
Trying inside App; having been blocked by Typescript types (allowing only html elements, not custom components)

Even better :

Trying inside Document; having blocked by Typescript types (not allowing any children at all, since it's discouraged ?)
Trying inside App; having been blocked by Typescript types (allowing only html elements, not custom components)

Screenshots

Custom Components in Document Head children are OK for Typescript

And no warning is shown in console in that case

Custom Components in App Head children are OK for Typescript

And they lead to the logical runtime issue

System information

OS: macOS
Browser (if applies) All
Next.js 10.0.0
Node v12.19.0
Typescript 4.0.5

Additional context

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "rootDir": "./src",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "./src",
    "paths": {
      "$styles": ["styles"],
      "$styles/*": ["styles/*"],
      "$components": ["components"],
      "$components/*": ["components/*"],
      "$constants": ["constants"],
      "$constants/*": ["constants/*"],
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Adamih · 2022-03-05T22:00:50Z

Adamih
Mar 5, 2022

Can I work on this?

0 replies

Aribaskar-jb · 2023-04-07T17:22:02Z

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Typescript typing of both <Head /> components, custom component children #64653

{{title}}

Replies: 8 comments

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Typescript typing of both <Head /> components, custom component children #64653

cyrilchapon Nov 14, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

Replies: 8 comments

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Adamih Mar 5, 2022

Aribaskar-jb Apr 7, 2023

cyrilchapon
Nov 14, 2020

Adamih
Mar 5, 2022

Aribaskar-jb
Apr 7, 2023