Next.js Discord

Discord Forum

Warning: React.jsx: type is invalid -- expected a string (for built-in components)....

Answered
Allegheny mound ant posted this in #help-forum
Open in Discord
Allegheny mound antOP
Hello! I'm new to nextjs and it seems that I'm having this problem. I am unfamiliar with this type of problem. I would like to ask for your help:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at layout.js:19.


layout.js:
"use client"
import './globals.css'
import { Inter } from 'next/font/google'
import { Head } from 'next/head'
import { Link } from 'next/link'

import '@fortawesome/fontawesome-svg-core/styles.css';

const inter = Inter({ subsets: ['latin'] })

const metadata = {
  title: 'Epoxyflooring - Textured concrete and epoxy flake',
  description: 'Your description here. Just a placeholder lol', // What to update?
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
        <title>{metadata.title}</title>
        <Link rel='icon' href='/favicon.ico' type='image/x-icon' />
        <Link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
        <Link rel="stylesheet" type="text/css" href="/assets/css/animate.css" />
        <Link
          href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&amp;family=Rubik:wght@300;400;500;600;700;800;900&amp;display=swap"
          rel="stylesheet"
        />
      </Head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}
Answered by awareness481
Replace <Head> with <head> and <Link /> with <link>, remove the related imports and try again
View full answer

6 Replies

awareness481
Replace <Head> with <head> and <Link /> with <link>, remove the related imports and try again
Answer
Allegheny mound antOP
May I ask why I should replace <Head> with <head>....?
awareness481
The next/head component is only used if you re using the pages directory, it won't be helpful here.
I'm unsure if <head> works or if you ll need to move everything to the metadata object though
Allegheny mound antOP
I see. Thanks @awareness481
Australian Freshwater Crocodile
I updated to Next.js 14 and now I am getting this error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.


I would appreciate any help. Thank you!