npm "next" 14.0.4 module high severity vulnerability and breaking change

[WEMcJJJ]

In working on this locally, running "npm install" showed that there were some packages that needed to be updated, so I updated them, however, there was one package, next, that it didn't update because doing so would be outside the stated dependency range. If I force the update, or change the dependency range (after all other packages have been updated), it beaks the ability to login (this is for version 14.2.14 of next). After successfully authenticating it redirects you back to the login page, and I see the following errors:

From the terminal in VS Code:

unhandledRejection: Error: NEXT_REDIRECT
    at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:49:19)
    at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:60:11)
    at $$ACTION_1 (webpack-internal:///(rsc)/./features/common/navigation-helpers.ts:32:62)
    at redirectIfAuthenticated (webpack-internal:///(rsc)/./features/auth-page/helpers.ts:53:83)
    at async Home (webpack-internal:///(rsc)/./app/page.tsx:13:5) {
  digest: 'NEXT_REDIRECT;replace;/chat;307;',
  mutableCookies: p {
    _parsed: Map(3) {
      'next-auth.csrf-token' => [Object],
      'next-auth.callback-url' => [Object],
      'next-auth.session-token' => [Object]
    },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}

From the Debug Console in VS Code:

unhandledRejection: Error: NEXT_REDIRECT
    at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:49:19)
    at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:60:11)
    at $$ACTION_1 (webpack-internal:///(rsc)/./features/common/navigation-helpers.ts:32:62)
    at redirectIfAuthenticated (webpack-internal:///(rsc)/./features/auth-page/helpers.ts:53:83)
    at async Home (webpack-internal:///(rsc)/./app/page.tsx:13:5) {digest: 'NEXT_REDIRECT;replace;/chat;307;', mutableCookies: Proxy(p), stack: 'Error: NEXT_REDIRECT
    at getRedirectError …ebpack-internal:///(rsc)/./app/page.tsx:13:5)', message: 'NEXT_REDIRECT'}

I've done some searching and testing of potential fixes but can't figure out how to resolve the issue. It appears to be related to how next handles the redirect (see this issue and this issue), but even after I've tried adding some try/catch blocks it still throws the same error and redirects to the login page. Any help would be much appreciated, thanks!

[DakotaWray2]

I took a look at this today and have it working without fully testing yet.

• check any packages that have next as a dep. I removed eslint-config-next, next-auth and next-themes
• remove node_modules and package-lock.json
• change next to 14.2.18 then npm install
• install eslint-config-next (14.2.18), next-auth (4.24.10) and next-themes (0.4.3)
• in src/app/page.tsx I removed the await redirectIfAuthenticated() and put it directly

// import { redirectIfAuthenticated } from "@/features/auth-page/helpers";
import { userSession } from "@/features/auth-page/helpers";
import { LogIn } from "@/features/auth-page/login";
import { redirect } from "next/navigation";

export default async function Home() {
  // await redirectIfAuthenticated();
  const user = await userSession();
  if (user) {
    redirect("/chat");
  }
  return (
    <main className="container max-w-lg flex items-center">
      <LogIn isDevMode={process.env.NODE_ENV === "development"} />
    </main>
  );
}

[DakotaWray2]

I have also noticed

export const RedirectToPage = (path: Page) => {
  redirect(`/${path}`);
};

does not seem to work with the way NEXT_REDIRECT expected errors are thrown. For example this works.

export const DeleteChatThreadByID = async (chatThreadID: string) => {
  await SoftDeleteChatThreadForCurrentUser(chatThreadID);
  // RedirectToPage("chat");
  redirect("/chat");
};

Adding async to CreateChatAndRedirect fixed that particular issue

export const CreateChatAndRedirect = async () => {
  const response = await CreateChatThread();
  if (response.status === "OK") {
    await RedirectToChatThread(response.response.id);
  }
};

Also in some of the client components, for example start-new-persona-chat.tsx, I don't see a reason why i couldn't just router.push(/chat/${response.response.id}); rather than RedirectToChatThread(response.response.id)

I use Vite+Express much more than Next so if anyone has any input as to why this would not be a good idea please chime in.