I have Next.JS 14.2.3 project which contains next-auth.js and next-intl with versions:

Whose versions are latest as for now (next-intl 3.17.2 latest).

Problem

While building the project from time to time I’m facing following error:

Failed to compile.

./node_modules@babelruntimeregeneratorindex.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
  ./node_modules@babelruntimeregeneratorindex.js
  ./node_modulesnext-authreactindex.js
  ./srccomponentsinterfaceheaderindex.tsx
  ./srccomponentsinterfaceindex.ts
  ./srccomponentsindex.ts
  ./srcconstbuilder-by-type.ts
  ./srcconstindex.ts
  ./srcmiddleware.ts


> Build failed because of webpack errors

for a random next-auth function e.g. signIn, useSession or signOut.

This time error points to the header.tsx file:

'use client';

import { signIn, useSession } from 'next-auth/react';
import { useTranslations } from 'next-intl';
import { useCallback, useMemo, useState } from 'react';

import { Dropdown, IconedButton, RelativeBox, SignOutModal } from '@/components';
import { GlobeIcon, SignInIcon, SignOutIcon, WFLogo } from '@/icons';
import { flags } from '@/icons/flags';
import { AvatarVector } from '@/icons/vectors';

import s from './header.module.scss';

export const Header = () => {
   const t = useTranslations();
   const { data: session } = useSession();

   const [langDropdownOpened, setLangDropdownOpened] = useState<boolean>(false);
   const [accountDropdownOpened, setAccountDropdownOpened] = useState<boolean>(false);
   const [signOutOpened, setSignOutOpened] = useState<boolean>(false);

   const handleSignIn = () => {
      signIn('keycloak');
   };

   const dropdownOptions = useMemo<TDropdownOption[]>(
      () => [
         {
            icon: flags.Ukraine,
            label: t('Languages.ua'),
            variant: 'original',
            onClick: () => {}, // TODO add language change
         },
         {
            icon: flags.Germany,
            label: t('Languages.de'),
            variant: 'original',
            onClick: () => {}, // TODO add language change
         },
         {
            icon: flags.USA,
            label: t('Languages.en'),
            variant: 'original',
            onClick: () => {}, // TODO add language change
         },
      ],
      [],
   );

   const toggleLangDropdown = useCallback(() => setLangDropdownOpened(prev => !prev), []);
   const toggleAccountDropdown = useCallback(
      () => setAccountDropdownOpened(prev => !prev),
      [],
   );
   const toggleSignOut = useCallback(() => setSignOutOpened(prev => !prev), []);

   const signInOption: TDropdownOption = useMemo<TDropdownOption>(
      () => ({
         icon: SignInIcon,
         label: t('Components.Interface.Header.signIn'),
         onClick: handleSignIn,
         variant: 'wf-primary',
      }),
      [],
   );

   const signOutOption: TDropdownOption = useMemo<TDropdownOption>(
      () => ({
         icon: SignOutIcon,
         label: t('Components.Interface.Header.signOut'),
         onClick: toggleSignOut,
         variant: 'destructive',
      }),
      [],
   );

   const targetDropdownOption = useMemo<TDropdownOption>(
      () => (session ? signOutOption : signInOption),
      [session],
   );

   return (
      <>
         <header className={s.header}>
            <WFLogo className={s.logo} />

            <section className={s.settings}>
               <RelativeBox>
                  <IconedButton
                     onClick={toggleLangDropdown}
                     size="xl"
                     variant="transparent"
                     icon={GlobeIcon}
                     tooltipPosition="bottom"
                     tooltipText={t('Tooltips.changeLang')}
                  />

                  {langDropdownOpened && (
                     <Dropdown options={dropdownOptions} onClose={toggleLangDropdown} />
                  )}
               </RelativeBox>

               <RelativeBox>
                  <IconedButton
                     icon={AvatarVector}
                     variant="transparent"
                     size="xl"
                     onClick={toggleAccountDropdown}
                  />

                  {accountDropdownOpened && (
                     <Dropdown
                        options={[targetDropdownOption]}
                        onClose={toggleAccountDropdown}
                     />
                  )}
               </RelativeBox>
            </section>
         </header>

         {signOutOpened && (
            <SignOutModal isOpened={signOutOpened} onClose={toggleSignOut} />
         )}
      </>
   );
};

Here are only useSession and signIn present and here is middleware file:

middleware.ts:

import createMiddleware from 'next-intl/middleware';
import { locales } from '@/const';

export default createMiddleware({
   locales,
   defaultLocale: 'en',
   localeDetection: false,
});

export const config = {
   matcher: ['/((?!api|_next|.*\..*).*)'],
};

I could’ve using next-intl without routing but it’s neccessary as I have more than 5 languages in the project