Head (next/head) throwing error in NextJS

Question

I am trying to add head to a page in NextJS. As per the documentation I have used next/head to add <head>. However, the code block for using next/head is throwing an error.

Code:

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 */}
    </>
    )
}

Error:

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.

My _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} />)
}

Nothing is wrong in this part of your code. What do you have in line 26 ? You're passing an object instead of a string somewhere.. — Mohammad Tbeishat, Apr 19 '22 at 13:23
Hi, for everyone's better understanding can you please share some more details about error or that tag you talking about. thank you! — Saurabh, Apr 19 '22 at 13:37
I've shared everything I could. This is the image tag: ``. I am pretty much using the standard set of libraries - Next, React and Mantine — Krushnal Patel, Apr 19 '22 at 13:45
logo can be an object instead of a string.. Otherwise, you should share more about your code! — Mohammad Tbeishat, Apr 19 '22 at 14:09
I'm agree with Mohammad Tbeishat. you can try to debug your image source is valid or not by replacing Next/Image to html Img tag. — Saurabh, Apr 19 '22 at 15:39
I am sure that the error is in the `...` cus when I comment, the code works fine and when I uncomment it, the above error pops up. I tried to place at different pages and in different levels of DOM but in vain.... gave the same error. — Krushnal Patel, Apr 19 '22 at 15:42
I've tried to copy and paste your code and things are working fine.. Maybe you need to check your _app.js — Mohammad Tbeishat, Apr 19 '22 at 20:39
Still nothing is wrong. I've tried copying and pasting your code in _app & in Header and everything is okay! Can you try surrounding your import Head with {} to be as import { Head } — Mohammad Tbeishat, Apr 21 '22 at 11:47

score 1 · Accepted Answer · answered Apr 22 '22 at 14:05

1

I have solved this issue. I had mentioned type: module in package.json. This was causing issues with mantine. I removed that line, used module.exports in next.config.js and it solved the issue

answered Apr 22 '22 at 14:05

Krushnal Patel

422
2
14

1

Note that you can still keep using ESM syntax in the Next.js config file by renaming it to `next.config.mjs`. See [Support ESM in next.config.js](https://stackoverflow.com/questions/68909624/support-esm-in-next-config-js). – juliomalves Apr 25 '22 at 08:28

Head (next/head) throwing error in NextJS

1 Answers1