Application error: a client-side exception has occurred WHEN going back

[woile]

Summary

Hi everyone, I've been trying to debug the issue with no success.
I was wondering if someone could give me a hand identifying the root cause.

I'm building a website https://reciperium.com using nextjs 14. And when I navigate back, it throws an "Application error: a client-side exception has occurred". I've looked online and apparently it happens when you miss-use "use client".
In my case, I have a few "async" components under pages.tsx, but I think this is fine, because they DO NOT have the "use client" mark. I would expect those pages to be render on the backend, and actually, everything works well if you navigate normally, the problem starts happening when you navigate back.

Steps to reproduce

1. Go to https://reciperium.com/recipes

2. Click on a username

3. Go back

4. Observe "Application error"

5. Now, if you refresh the website is loaded properly again

6. Observe

Any ideas on what could be happening?

Very rarely I'm able to reproduce it locally, and I get:

On the console:

Uncaught Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

The above error occurred in the <NotFoundErrorBoundary> component

On the main screen:

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

And again, I went through all the "use client" pages, and none of them have async functions. And the weird thing is that on reload it works again, so the server is actually rendering those components

Additional information

Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.4
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.6
Next.js Config:
  output: standalone

Example

No response

[woile]

I fixed it thanks to this issue, I was forced to gather data, and I identified why I was not able to reproduce it locally: because I was logged in.
When not logged in, there was a usePathname not wrapped in a suspense. Wrapping the component fixed the issue.

<Suspense>
   <MainNav>
</Suspense>

[abhishek-goswamii]

hey, i am having the same issue, but not able to debug this, when i go back the props which are supposed to come from the server side props are undefined. but when refresh the page , it works fine

[woile]

Check if your component is async, if so, remove the async.

[MazenChaouch]

hi woile,
what is i need the component to be async what should i do?
because i'm fetching data in that component
thanx,

[woile]

I don't understand your question.

[souravsspace]

im getting an same issue on nextjs 14. its works on every device expect iphone 💔

[Dubemtopsite]

Same with me here works well on other devices but most iPhone users are reporting error

[bogdanblazhkevych]

I had a similar issue. Self hosted. Everything was okay except in prod. This message would display on first page visit and never after. Disabling cache in the network tab would reproduce it, and requests to fetch .js files would return 503.

The issue was my nginx config, and increasing my rate limits fixed it.

Seems like this occurs to a few people for all sorts of different reasons. This was mine

[nozimjonpro]

I have encountered this problem, I tried to redirect user from /a route to /b route using redirect next js function, so it is giving this kind of error. I used middleware for redirecting now everything is fine.

[sea403]

@nozimjonpro can you provide the middleware you used, am also facing the issue and it's only happening when I deploy the the project on the self hosting(cPanel). Here is the server.js file:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = process.env.PORT || 3000

const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // We might need this for redirecting issue
      // if (!dev && req.headers['x-forwarded-proto'] !== 'https') { 
      //   res.writeHead(301, {
      //     Location: `https://${req.headers.host}${req.url}`,
      //   });
      //   return res.end();
      // }    
      
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
  })
})

and the middleware I have in the next.js project is following:

import { NextResponse } from "next/server";
import { getCookie, hasCookie } from "cookies-next";

const unAuthPath = [
  "/cookie-policy",
  "/register",
  "/password-reset-request",
  "/password-reset",
  "/reset-request-verify",
  "/validate",
];

export async function middleware(req, res) {
  const { pathname } = req.nextUrl;  
  const maintenanceModeCookie = getCookie("maintenance_mode", { req, res });
  const isLoggedIn = hasCookie("is_logged_in", { req, res });

  
  // Redirect to maintenance mode if enabled and user is not already on the maintenance page
  if (pathname !== "/maintenance-mode" && maintenanceModeCookie) {
    return redirectTo("/maintenance-mode", req);
  }

  // Allow access to all policy pages without authentication
  if (pathname.startsWith("/policy/") || pathname.startsWith("/cookie")) {
    return NextResponse.next();
  }

  if (pathname.startsWith("/login")) {
    return NextResponse.next();
  }

  // Redirect unauthenticated users to login if they try to access protected paths
  if (!isLoggedIn && !unAuthPath?.includes(pathname)) {
    return redirectTo("/login", req);
  }

  // Redirect authenticated users away from auth-related paths (e.g., login, register)
  if (isLoggedIn && unAuthPath.includes(pathname)) {
    return redirectTo("/", req);
  }

  // Check profile completion and authorization status
  let userStr = getCookie("user_data", { req, res });
  let user = userStr ? JSON.parse(userStr) : null;

  if (user) {
    // Profile completion check
    if (user.profile_complete != 1) {
      if (!pathname.startsWith("/profile-data")) {
        return redirectTo("/profile-data", req);
      }
    } else if (pathname === "/profile-data") {
      return redirectTo("/", req);
    } else if (
      user.ev != 1 ||
      user.sv != 1 ||
      user.tv != 1 ||
      user.status == 0
    ) {
      if (!pathname.startsWith("/authorization")) {
        return redirectTo("/authorization", req);
      }
    } else if (pathname === "/authorization") {
      return redirectTo("/", req);
    }

    // KYC verification check for wallet-related paths
    if (
      pathname === "/wallet/withdraw" ||
      pathname === "/wallet/withdraw-confirmation"
    ) {
      if (user.kv != 1) {
        return redirectTo("/kyc-verification", req);
      }
    }

    // Redirect away from KYC verification if already completed
    if (pathname === "/kyc-verification") {
      if (user.kv == 1) {
        return redirectTo("/wallet?tab=withdraw", req);
      }
    }
  }

  // Allow the request to proceed if no redirection is needed
  return NextResponse.next();
}

function redirectTo(url, req) {
  let { basePath } = req.nextUrl;
  return NextResponse.redirect(new URL(basePath + url, req.url));
}

export const config = {
  matcher: [
    "/",
    // '/((?!api|static|icon*|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
    "/((?!api|static|icon*|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|css|js|images|fonts|css|firebase-messaging-sw.js).*)",
  ],
};