Head (next/head) 在 NextJS 中抛出错误

Question

我正在尝试将 head 添加到 NextJS 中的页面。根据 documentation，我使用 next/head 添加 <head>。但是，使用 next/head 的代码块会引发错误。

代码：

import Head from 'next/head';

export default function Header(props) {
    return (
    <>
      {/* Below line is line 18 as per the error  */}
      <Head>
        <title>Page title</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
      </Head>
      {/* some HTMl code */}
    </>
    )
}

错误：

Check your code at Header.js:18.
    at Header (webpack-internal:///./components/layout/Header.js:26:11)
    at nav
    at /home/krush/cutefit/next/dashboard/node_modules/@mantine/core/cjs/components/Box/Box.js:42:18
    at /home/krush/cutefit/next/dashboard/node_modules/@mantine/core/cjs/components/AppShell/VerticalSection/VerticalSection.js:45:5
    at /home/krush/cutefit/next/dashboard/node_modules/@mantine/core/cjs/components/AppShell/Header/Header.js:38:25
    at div
    at /home/krush/cutefit/next/dashboard/node_modules/@mantine/core/cjs/components/Box/Box.js:42:18
    at /home/krush/cutefit/next/dashboard/node_modules/@mantine/core/cjs/components/AppShell/AppShell.js:49:21
    at MantineProvider (/home/krush/cutefit/next/dashboard/node_modules/@mantine/styles/cjs/theme/MantineProvider.js:58:3)
    at Layout (webpack-internal:///./components/layout/layout.js:15:19)
    at MyApp (webpack-internal:///./pages/_app.js:11:18)
    at StyleRegistry (/home/krush/cutefit/next/dashboard/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/home/krush/cutefit/next/dashboard/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/home/krush/cutefit/next/dashboard/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/home/krush/cutefit/next/dashboard/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/home/krush/cutefit/next/dashboard/node_modules/next/dist/server/render.js:736:21)
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5833:9)
    at renderNodeDestructive (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5875:11)
    at renderNode (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6009:12)
    at renderChildrenArray (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5965:7)
    at renderNodeDestructive (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5897:7)
    at renderElement (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5761:9)
    at renderNodeDestructive (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5875:11)
    at renderIndeterminateComponent (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5575:7)
    at renderElement (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5736:7)
    at renderNodeDestructive (/home/krush/cutefit/next/dashboard/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5875:11)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 94 ms (666 modules)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我的_app.js:

import '../styles/global/_App.scss';
import 'bootstrap/dist/css/bootstrap.min.css'

export default function MyApp({ Component, pageProps }) {
    const getLayout = Component.getLayout || ((page) => page)

    return getLayout(<Component {...pageProps} />)
}

Answer 1

我已经解决了这个问题。我在 package.json 中提到了 type: module。这导致了 mantine 的问题。我删除了那行，在 next.config.js 中使用了 module.exports 并解决了问题

Head (next/head) 在 NextJS 中抛出错误

Head (next/head) throwing error in NextJS

html

javascript

reactjs

next.js