next.jserror-handlingcustom-error-pagesreact-error-boundary

Error "React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary." in NextJS app + 404 page

I have a NextJS app. In the app, I have a custom 404 page that I literally took from https://nextjs.org/docs/advanced-features/custom-error-page. I also have a middleware.ts file that checks for authentication. My NextJS app uses the getStaticPaths and getStaticProps. I have set fallback to false in my getStaticPaths.

When I run my app, and I go to a valid URL, my app renders the content correctly. However, when I am going to an INVALID URL, my app renders my custom 404 page briefly and then the browser console throws this error: React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. along with some other errors like TypeError: Cannot read properties of undefined (reading 'default'). Please see the images below.

When debugging I noticed that if I remove the middleware.ts file there are no errors. However,

  1. if I have the middleware.ts file and using the default NextJS 404 page I get an infinite requests for a 404 page in my Network tab.

enter image description here

  1. if I have the middleware.ts file and use the custom 404 page I get the below errors.

Unhandled Runtime Error

Uncaught TypeError

As you can see in the above image, the 404 page is loaded briefly which is what is expected, but immediately it throws the other errors.

MDXRemote component error

Firstly, I have not set any ErrorBoundary in my NextJS app.

Secondly, I thought that if fallback is false everything not matching the paths from the getStaticPaths will be 404 without even calling the component. So, I am getting confused why I am getting the above errors.

I believe there is something happening with the authentication set up in the middleware.ts file. Do I need to add anything more related to my custom 404.tsx page in my getStaticProps?

Any help would be appreciated as I am new to NextJS. Not sure how to fix this.

Solution

  • In my package.json I was using "next": "13.1.6". After referring to https://github.com/vercel/next.js/issues/43953 and https://github.com/vercel/next.js/issues/44293 I figured maybe my current next package was causing the issue. So, all I did was upgraded my next package to "next": "13.2.1" and everything started working correctly.