我试图将head添加到NextJS中的页面。根据文档，我使用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} />)
}
我已经解决了这个问题我在package.json中提到了type: module。这导致了曼汀的问题。我删除了那条线，使用了模块。在next.config.js中导出，它解决了问题