默认导出不是页面中的 React Component: "/" NextJS

Question

不确定为什么会出现错误，这是我的 index.js 和 App.js（默认导出）。我在 app.js.

中使用了 export default

index.js:

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

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

已修复，将 index.js 制作成 class 并导出。

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 2

日期：2021 年 1 月 23 日

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

如果您使用的是功能组件而不是 class 组件，在某些情况下您也会遇到此错误。确切地说，我不知道为什么会这样，但我只是通过 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 3

对我来说，这只是因为我有一个 .ts 而不是 .tsx 文件。它可能会用 .js 而不是 .jsx 扩展做同样的事情。

Answer 4

如果您在 server-side-rendering 期间抛出错误而未在初始页面呈现之前捕获它，也会发生这种情况。以下面的例子：

const Component = (props) => {
  return (
    <div {...props}>
       hello!
    </div>
  );
};

Component.getInitialProps = async ({ query, req, asPath }) => {
  throw new Error('Application is crashing without catch');
}

确保在呈现页面之前捕获意外错误。

Answer 5

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

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

或

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

export default Home;

如果不是，你会得到那个错误。

默认导出不是页面中的 React Component: "/" NextJS

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

reactjs

next.js