Next.js Discord

Discord Forum

element type is invalid

Unanswered
Tomistoma posted this in #help-forum
Open in Discord
TomistomaOP
I posted in the Flowbite React Discord as well because I think that it may be a Flowbite React issue.

We're running Next.js v14, React v18 and Tailwind v4. We're running the app router and using (auth) and (public) route groups so they can render different layouts. (auth) seems to have no problems at all since all of those pages are seen to be dynamic. They use Flowbite React without causing any issues. When I went to build Next.js I kept getting the error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I saw someone suggest that downgrading to 14.1.1 but we recently upgraded for I believe security reasons. I also saw someone suggest this could be to do with the way that the functions are declared. However, neither of these solutions feel right when I look at the circumstances.

This was also a problem when running the dev server or building the app. The error started to show up after installing Flowbite React and using Flowbite React components. However, it's only 3 specific pages that are throwing the error. Public pages that it seems Next.js is trying to build as static pages.

Removing all Flowbite React components from those pages clears the error. Or I can clear the error by forcing Next.js to treat the pages as dynamic by adding export const dynamic = 'force-dynamic'; at the top of the 3 offending pages.

Any ideas what might be the issue here? It's a hot fix to throw that line of code into each page and it's not big deal but I'd really prefer to understand and fix the error in a more elegant way, with real understanding of what's going on.

Thanks for the help!

7 Replies

can you just share the code of affected pages?
TomistomaOP
layout.tsx
import { Inter } from 'next/font/google';
import { Metadata } from 'next';
import '@/app/styles/globals.css';
import { Navbar } from '@/components/navbar';
import { Providers } from '../providers';

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

export const metadata: Metadata = {
  title: 'Founding Titans',
  description: 'Connect with your network in meaningful ways',
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head></head>
      <body className={inter.className}>
        <Providers>
          <main className="min-h-screen">
            <Navbar />
            <div className="grow bg-primary-light dark:bg-secondary-dark dark:text-primary-light text-seconday-dark">
              {children}
            </div>
          </main>
        </Providers>
      </body>
    </html>
  );
}
app/(public)/page.tsx
// This page is for non-authenticated users
export const dynamic = 'force-dynamic';

export default async function PublicHome() {
  return 'Landing page content for non-authenticated users.';
}
app/(public)/register/page.tsx
import { RegisterLogin } from '@/components/Auth/RegisterLogin';

export const dynamic = 'force-dynamic';

const RegisterPage = async () => {
  return <RegisterLogin />;
};
export default RegisterPage;
I just want to see the flowbite implementation
TomistomaOP
In the <RegisterLogin /> component, Flowbite React is imported as:
import {
  Alert,
  Button,
  Card,
  HelperText,
  Label,
  TextInput,
} from 'flowbite-react';


Then used as follows. I left out the form since it won't let me post such a long comment.
return (
    <Card className="max-w-lg mx-auto p-4">
      <Image
        src="/images/logo.webp"
        alt="Logo"
        width={108}
        height={34}
        className="object-contain"
        priority
      />

      <h1 className="text-2xl font-semibold">
        {login ? 'Login to your account' : 'Create your account'}
      </h1>

      <HelperText className="flex items-center justify-center gap-1">
        {login ? "Don't have an account?" : 'Already have an account?'}
        {login ? (
          <Link href="/auth/register">Register</Link>
        ) : (
          <Link href="/auth/login">Login</Link>
        )}
      </HelperText>
    </Card>
  );
If you give me more details on what you're specifically looking at / for I can provide more snippets.