Got the error "Build optimization failed: found page without a React Component as default export in pages/"

Question

I run yarn build
Got the error:

> Build optimization failed: found page without a React Component as default export in 
pages/

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My directory construction is:

• public

• src

  • components
  • pages
    • admin
      • index.tsx
    • _app.tsx
    • index.tsx
  • slices
  • utils ...

• .env

• .gitignore

• next-env.d.ts

• package.json

• tsconfig.json

• yarn.lock

I hope my way is correct.
What's wrong with my code?

Update

From Mark G advise and link, I recognized return value should be a valid React Component.
I thought return value should be valid JSX.

I think my return value is valid.
What's wrong???

frontend/src/pages/index.tsx

import LoginPage from "pages/admin";

export function Home() {
  return <LoginPage />;
}

frontend/src/pages/admin/index.tsx

export default function LoginPage() {

...

  function Redirect(to: any) {
    const router = useRouter();

    useEffect(() => {
      router.push(to);
    }, []);

    return null;
  }

  if (logged_in.payload.loggedInReducer.logged_in) {
    return <div></div>;
  } else {
    return (
      <ThemeProvider theme={theme}>
        ...
      </ThemeProvider>
    );
  }
}

Answer 1

In your frontend/src/pages/index.tsx file, change...

// missing `default`
export function Home() {
  return <LoginPage />;
}

...to...

// add `default`
export default function Home() {
  return <LoginPage />;
}