默认导出不是页面中的 React 组件："/" NextJS

Question

不知道为什么会出现错误，这是我的 index.js 和 App.js（默认导出）。我在 app.js 中使用了导出默认值。

索引.js：

import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
<App />;

应用程序.js

import React, { Component } from "react";
import { ToastContainer } from "react-toastify";
import NavBar from "../components/navBar";
import auth from "../services/authService";
import "react-toastify/dist/ReactToastify.css";
import "./App.css";

class App extends Component {
  state = {};

  componentDidMount() {
    const user = auth.getCurrentUser();
    this.setState({ user });
  }

  render() {
    const { user } = this.state;

    return (
      <React.Fragment>
        <ToastContainer />
        <NavBar user={user} />
      </React.Fragment>
    );
  }
}

export default App;

Answer 1

日期：2021年1月23日

我在我的Next.js应用程序上也遇到了这个问题。

如果您使用函数组件而不是类组件，在某些情况下您也会收到此错误。确切地说，我不知道为什么会发生这种情况，但我刚刚通过exporting页面底部的组件解决了这个问题。

像这样，

案例错误场景：

export default function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

Error: The default export is not a React Component in page: "/"

怎么解决呢？

我只是将导出放在页面底部，然后它就会消失。

像这样，

function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

export default Home;

希望这对您有帮助！

Answer 2

在 next.js 中，所有页面都必须默认导出。要么这样

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

或者

const Home: NextPage = () => {
  return (
    <BaseLayout>
    
    </BaseLayout>
  );
};

export default Home;

如果没有，您会收到该错误。

Answer 3

我由于完全不同的原因而收到此错误，在我的情况下，由于某种原因，我删除了文件中的代码app/layout.tsx并忘记了它，但这就是导致错误的原因：error - Error: The default export is not a React Component in page: "/my_page"。

为了解决这个问题，我只需将以下代码放入我的 app/layout.tsx文件中：

import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

这可能是一种罕见的情况，但希望它能有所帮助。

Answer 4

已修复，使 index.js 成为一个类并将其导出。

import React, { Component } from "react";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
class Index extends Component {
  state = {};
  render() {
    return <App />;
  }
}

export default Index;

Answer 5

遇到了这个问题，但就我而言，我使用的是 next.js 13+ 中的路由组。layout.tsx / layout.jsx也检查一下你的。确保<your-component>.tsx和layout.tsx都有默认导入。例如export default <your-component>在两个文件中