收到错误 "Build optimization failed: found page without a React Component as default export in pages/"

Question

我运行yarn build
收到错误：

> 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.

我的目录结构是：

• public

• src

  • 组件
  • 页
    • 管理员
      • index.tsx
    • _app.tsx
    • index.tsx
  • 片
  • 实用程序 ...

• .env

• .gitignore

• 下一个-env.d.ts

• package.json

• tsconfig.json

• yarn.lock

希望我的方法是正确的。
我的代码有什么问题？

更新

根据 Mark G 的建议和 link，我认识到 return 值应该是一个有效的 React 组件。
我认为 return 值应该是有效的 JSX。

我认为我的 return 值是有效的。
怎么了？？？

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

在您的 frontend/src/pages/index.tsx 文件中，更改...

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

...到...

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

Answer 2

每当遇到错误时，请先检查文件和目录。

在这里，您可以看到页面中发生了错误/

因为你在页面中有一个文件名 index.tsx，所以它的目录意味着 pages/index.tsx（#Note：每当你导入一个目录时，它首先检查是否有任何文件名 index.extension 在此目录中。)

在你的index.tsx中，你会有很多功能。因此，它会找到您默认导出的函数。

可能是你忘了在index.tsx.

的函数中添加关键字default

在你的 frontend/src/pages/index.tsx 文件中，只需添加关键字 default... 希望它能奏效，你能理解。

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