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>
    );
  }
}

CodePudding user response：

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 />;
}

CodePudding user response：

Whenever you got an error, first check the file and the directory.

Here, You can see it's an error happening in pages/

as you have a file name index.tsx in pages, so it's the directory means pages/index.tsx (#Note: Whenever you import a directory it first checks is there any file name index.extension in this directory.)

In your index.tsx, you would have many functions. So, it finds a function which you exported by default.

Maybe you forgot to add a keyword default in the function of index.tsx.

In your frontend/src/pages/index.tsx file, just add a keyword default... Hope it'll work and you can understand.

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