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;

your index.js is wrong I guess. can you share the repository link or more details on how are you using index.js file? — Pradeepb, Jan 23 '20 at 08:09
I've fixed it, just needed to put the content of index into a class and export it. — Keytoll, Jan 23 '20 at 10:36
For some reason Next doesn't allow wrapping the content in a fragment. If you remove that/replace it with a div it should work. — aaronmbmorse, Jul 09 '23 at 20:05

score 30 · Answer 1 · answered Jan 23 '21 at 08:22

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!

score 13 · Answer 2 · answered Apr 30 '22 at 20:37

13

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.

answered Apr 30 '22 at 20:37

Yilmaz

35,338
10
157
202

I see, thanks bro! – zillBoy Jul 28 '23 at 09:38

score 11 · Accepted Answer · answered Jan 23 '20 at 10:36

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;

score 3 · Answer 4 · answered Mar 27 '23 at 22:35

I was getting this error because of a completely different reason, In my case for some reason I removed the code In my app/layout.tsx and had forgotten about it, but this is waht was causing me to get the error error - Error: The default export is not a React Component in page: "/my_page".

To fix it I just put the following code in my app/layout.tsx file:

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

This is probably a rare occurance but hopefully it helps.

Thank you! Your answer was helpful to me, because you drew my attention to the layout.tsx file. I created it, but forgot to write any code to it, so it was empty, hence at compilation, I was getting the error. — Arislan Makhmudov, Aug 06 '23 at 04:54

score 1 · Answer 5 · answered Apr 01 '22 at 04:34

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.

score 1 · Answer 6 · answered Aug 21 '23 at 08:33

1

Ran into this issue but in my case i was using the route group in next.js 13+. Check your layout.tsx / layout.jsx as well. Make sure both <your-component>.tsx and layout.tsx have default imports. E.g export default <your-component> in both files

answered Aug 21 '23 at 08:33

hansss

321
4
4

score 0 · Answer 7 · answered Jul 30 '21 at 05:59

0

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.

answered Jul 30 '21 at 05:59

jjhiggz

49
4

score 0 · Answer 8 · answered Aug 25 '22 at 00:13

I experienced the same error: The default export is not a React Component in page: "/_app".

Next 12.2.5

In my case I was transitioning from a React app to Nextjs.

My index.js file was a functional component, but I was missing the following on my _app.js

import './App.css'

/* I was missing the following code */
function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

score 0 · Answer 9 · answered Jan 06 '23 at 10:19

0

This worked for me:

Delete node_modules and yarn.lock/package-lock.json
run yarn install or npm install

answered Jan 06 '23 at 10:19

kennedy muthaura

1

score 0 · Answer 10 · edited May 14 '23 at 05:16

0

I had some problem with Next.js 13.4:

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

I solved them by just importing React:

import React from "react"

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

edited May 14 '23 at 05:16

Aaron Meese

1,670
3
22
32

answered May 06 '23 at 06:30

Info All

21
1
2
6

score 0 · Answer 11 · answered Jul 09 '23 at 20:02

0

I ran into this issue because I was using a fragment <></> around the html. After removing it, it worked as aspected.

answered Jul 09 '23 at 20:02

aaronmbmorse

359
3
10

score 0 · Answer 12 · edited Aug 27 '23 at 08:42

0

I got the same issue in my next js app. The problem i was facing was because of the missing semi-colon at the end of export default page.

Previous code:

export default page

Fixed code:

export default page;

edited Aug 27 '23 at 08:42

starball

20,030
7
43
238

answered Aug 27 '23 at 02:51

Yasir Khan

11
2

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

12 Answers12

Linked