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

Question

Not sure why the error is coming up, heres my index.js and App.js (the default export). I have used export default in the app.js.

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

Fixed, made index.js a class and exported it.

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

Date: 23/01/2021

I've also faced this issue on my Next.js app.

If you're using a functional component instead of a class component you'll get this error as well in some casses. Exactly I don't know why this is happening but I just resolved this issue by exporting my component at the bottom of the page.

Like this,

Case Error scenario:

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

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

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

How to resolved it?

I just put my export at the bottom my page and then it'll be gone.

Like this,

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

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

export default Home;

Hopefully, it'll be helpful for you!

Answer 3

In next.js all pages has to be exported default. Either this way

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

or

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

export default Home;

If not you get that error.

Answer 4

For me, this just happened because I had a .ts and not a .tsx file. It might do the same thing with .js instead of .jsx extensions.

Answer 5

This can also happen if you are throwing an error without catching it before the initial page renders during server-side-rendering. Take for instance the following:

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

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

Make sure you are catching unexpected errors prior to the page being rendered.