logo标签列表

警告：缺少 next-head-count

javascriptnext.jshead
10
我正在使用来自Next文档的定制_document.js文件。结果，我一直收到警告消息在控制台打印出来。我尝试重新启动服务器并清空浏览器缓存。我的_document.js文件位于一个“pages”文件夹中，正如应该的那样。我确认文件正在被读取，通过向我的<Head>添加一些标签，并检查我的网站，看看这个标签是否被添加到了<Head>。（我的网站正常运行，我只是厌倦了这个警告消息。）
控制台警告:
Warning: next-head-count is missing. https://err.sh/next.js/next-head-count-missing

这是我的_document.js文件：
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
您的_document.js看起来很好。您是否尝试删除.next文件夹并重新启动开发服务器？ - hangindev.com
1
我尝试删除node_modules和.next文件夹。我刚找到一个解决方案并在下面发布了。无论如何，感谢您的帮助！ - Michal K
7个回答
12

当输入了一个不支持的HTML标签时，该错误也会出现在添加到<Head>标签中的情况下。

在我的情况下，我不小心在组件中的<Head>...</Head>标签内添加了一个<p>...</p>标签，导致了这个错误。

6

我曾经遇到同样的问题，与<Head>标签内的<html lang="en" />有关。

6

显然，我在index.html中也有一个<head>标签。删除它后错误消失了。我的_document.js没有任何问题。我是在index.js中单独导入样式的<head>，这就是错误发生的原因。

解决方案：我将<head>内容从index.js移动到_document.js，并从index.js中删除了<head>标签。

1
我有同样的问题，但这个解决方案对我不起作用...有什么建议吗？ - Aakash Chauhan
3
在我的情况下，我在 next/head 的 Head 元素中有一个 <html lang={lang}/>。显然不支持更改 lang 属性。 - itsjavi
嘿@itsjavi，你能找到替代方案吗？我也遇到了同样的问题。 - Satyaki Das
2

在我的情况下，next的Head组件内有一个不正确的html标签。90%的错误都意味着Head内部的内容出了问题。尝试逐个删除Head内部的元素，您将找到导致问题的原因。

1
在我的情况下，“将HTML转换为JSX” vscode扩展在next/head组件中添加了一个包装器div标签。我删除了div标签，警告消失了。
1
在我的情况中，从 next/Document 导入的 Head 组件在自定义的 _document 中，但它位于 body 标签内，将其移动到 Html 组件内并移到 body 标签之外即可解决问题。
// Incorrect
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <body>
          <Head />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}


// Correct
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
0
对我来说，在<Head>中有一个自定义组件<MobileView>。所以改变它就解决了问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接