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,
- if I have the
middleware.tsfile and using the default NextJS 404 page I get an infinite requests for a 404 page in my Network tab.
- if I have the
middleware.tsfile and use the custom 404 page I get the below errors.
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.
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.
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.
- Why Nodemailer is working locally but not in Production?
- Largest Contentful Paint very slow on mobile using Next.js
- Website name is not showing in google search result, URL is shown instead
- How to Delete a Cookie in a Next.js 14 Middleware After External API Validation
- Unable to fetch image from strapi and getting this error " http://localhost:1337/undefined"
- getStaticProps return an empty array
- Refresh token coming from Nest.js as cookie does not get persisted after refresh
- path.startsWith is not a function in next js
- Getting a 504/502 error on api requests in Nextjs deployed on Vercel
- How to solve FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore problem?
- NextJS app router - get all query parameters in string
- Return error information from API when using Next-auth
- NextJS 15 loading.tsx not showing
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- How to I deploy nextjs application in a production environment, using ssl?
- What is Causing the Payload Argument must be type object when data matches the schema
- Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'
- Confused about NextJS, whether to use "app"-directory or "pages" and "index.tsx" or "page.tsx"
- My cart component in an ecommerce project keeps redirecting to homepage instead of checkout and logs out the user in production
- NextAuth: how to return custom errors without redirection
- Next.js 15 API Route - “Invalid GET Export” Error in Dynamic Route [id]
- Usetranslation, next.js SSR
- using .env.local with playwright
- ESLint error saying that my react hook may be executed more than once
- Tailwind media queries don't work properly on Safari
- Values of step 2 getting duplicated in step 1 of multi step form. (NextJs, Shadcn, react-hook-form,zod)
- How to fix Next.js Vercel deployment module not found error
- BrowserRouter changing URL and not linking to page
- Next.js 15: Error setting cookies in server action
- Issues with <Image /> and <Link /> from Next.js in a monorepo package (peerDependencies set)