Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime

Question

I'm building a project where I decided to use NextUI components.

I added Select component from NextUI and in development mode everything work perfectly. When I finished developing the project and decided to build it I saw following error:

$ npm run build
> [email protected] build
> next build
 ▲さんかく Next.js 14.1.3
 - Environments: .env
 Creating an optimized production build ...
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (189kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (121kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
Failed to compile.
./node_modules/lodash.debounce/index.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/lodash.debounce/index.js
./node_modules/@nextui-org/calendar/dist/chunk-NABLCSM5.mjs
./node_modules/@nextui-org/calendar/dist/index.mjs
./node_modules/@nextui-org/react/dist/index.mjs
./src/components/UI/Fields/Select/index.tsx
./src/components/UI/Fields/index.ts
./src/components/UI/index.ts
./src/components/Workspace/Tabs/Orders/index.tsx
./src/components/Workspace/Tabs/index.ts
./src/const/tabs.ts
./src/const/index.ts
./node_modules/lodash.get/index.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/lodash.get/index.js
./node_modules/@nextui-org/theme/dist/chunk-YSA7EQBH.mjs
./node_modules/@nextui-org/theme/dist/index.mjs
./node_modules/@nextui-org/react/dist/index.mjs
./src/components/UI/Fields/Select/index.tsx
./src/components/UI/Fields/index.ts
./src/components/UI/index.ts
./src/components/Workspace/Tabs/Orders/index.tsx
./src/components/Workspace/Tabs/index.ts
./src/const/tabs.ts
./src/const/index.ts
./node_modules/lodash.kebabcase/index.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/lodash.kebabcase/index.js
./node_modules/@nextui-org/theme/dist/chunk-YSA7EQBH.mjs
./node_modules/@nextui-org/theme/dist/index.mjs
./node_modules/@nextui-org/react/dist/index.mjs
./src/components/UI/Fields/Select/index.tsx
./src/components/UI/Fields/index.ts
./src/components/UI/index.ts
./src/components/Workspace/Tabs/Orders/index.tsx
./src/components/Workspace/Tabs/index.ts
./src/const/tabs.ts
./src/const/index.ts
./node_modules/lodash.mapkeys/index.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/lodash.mapkeys/index.js
./node_modules/@nextui-org/theme/dist/chunk-YSA7EQBH.mjs
./node_modules/@nextui-org/theme/dist/index.mjs
./node_modules/@nextui-org/react/dist/index.mjs
./src/components/UI/Fields/Select/index.tsx
./src/components/UI/Fields/index.ts
./src/components/UI/index.ts
./src/components/Workspace/Tabs/Orders/index.tsx
./src/components/Workspace/Tabs/index.ts
./src/const/tabs.ts
./src/const/index.ts
./node_modules/lodash.omit/index.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/lodash.omit/index.js
./node_modules/@nextui-org/theme/dist/chunk-YSA7EQBH.mjs
./node_modules/@nextui-org/theme/dist/index.mjs
./node_modules/@nextui-org/react/dist/index.mjs
./src/components/UI/Fields/Select/index.tsx
./src/components/UI/Fields/index.ts
./src/components/UI/index.ts
./src/components/Workspace/Tabs/Orders/index.tsx
./src/components/Workspace/Tabs/index.ts
./src/const/tabs.ts
./src/const/index.ts
> Build failed because of webpack errors

I explored tons of links with related information but none of them helped me. In some issues devs say "Sorry we cannot help with it"

Here I'll attach whole related code:

Select/index.tsx:

'use client';
import { Select, SelectItem } from '@nextui-org/select';
import { ChangeEventHandler } from 'react';
import s from './Select.module.scss';
type TProps = {
 options: TOption[];
 onChange: ChangeEventHandler<HTMLSelectElement>;
 label?: string;
 multiple?: boolean;
 value?: string | string[];
 selectorLabel?: string;
 placeholder?: string;
};
export const SelectOption = ({
 onChange,
 options,
 label,
 multiple,
 value,
 selectorLabel = '',
 placeholder = '',
}: TProps) => {
 return (
 <div className={s.selectWrapper}>
 {label && <p className={s.label}>{label}</p>}
 <Select
 label={selectorLabel}
 selectionMode={multiple ? 'multiple' : 'single'}
 selectedKeys={new Set(Array.isArray(value) ? value : [value as string]) ?? 'all'}
 onChange={onChange}
 className={s.select}
 placeholder={placeholder}
 >
 {options.map(option => (
 <SelectItem key={option.key} value={option.key} className={s.item}>
 {option.label}
 </SelectItem>
 ))}
 </Select>
 </div>
 );
};

layout.tsx:

'use client';
import { NextUIProvider } from '@nextui-org/system';
import { notFound } from 'next/navigation';
import { SessionProvider } from 'next-auth/react';
import { NextIntlClientProvider } from 'next-intl';
import { ReactNode } from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistor, store } from '@/store';
import './globals.scss';
import { translations } from '@/translations';
import { TLocale } from '@/types/locale';
interface LayoutProps {
 children: ReactNode;
 session: never;
 params: { locale: string };
}
export default function RootLayout({
 children,
 session,
 params: { locale },
}: LayoutProps): JSX.Element {
 const messages = translations[locale as TLocale];
 if (!translations) {
 notFound();
 }
 return (
 <html lang={locale}>
 <body>
 <Provider store={store}>
 <PersistGate persistor={persistor}>
 <NextUIProvider>
 <SessionProvider session={session}>
 <NextIntlClientProvider messages={messages} locale={locale}>
 {children}
 </NextIntlClientProvider>
 </SessionProvider>
 </NextUIProvider>
 </PersistGate>
 </Provider>
 </body>
 </html>
 );
}

next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');
const withNextIntl = require('next-intl/plugin')('./src/i18n.ts');
const isProd = process.env.NODE_ENV === 'production';
const nextConfig = {
 webpack(config) {
 config.module.rules.push({
 test: /\.svg$/i,
 use: ['@svgr/webpack'],
 });
 return config;
 },
 sassOptions: {
 includePaths: [path.join(__dirname, 'src')],
 outputStyle: isProd ? 'compressed' : 'expanded',
 },
};
module.exports = withNextIntl(nextConfig);

• Mike 'Pomax' Kamermans: If the devs don't want to help, then either you're going to have to dig through the Select code to find where things are actually going wrong, or find a different component by someone else that does the same thing without dynamic code injection.
• Lvasche: @Mike'Pomax'Kamermans I solved the issue. Just will use headlessui :D

Answer 1

Chances are the package is not supported by Next.js 14, yet. I recently had this error for socket.io-client; Client packages catching errors meant for server components sounds weird.

Anyways, the only fix I can find right now is by adding an exemption (unstable_allowDynamic) via middleware's config as per https://nextjs.org/docs/messages/edge-dynamic-code-evaluation and just copy the top node_modules/... paths stated on the error log.

So your middleware.ts/js at the root of your project would be something like this:

import { NextFetchEvent, NextRequest } from 'next/server'
// If you don't originally have a middleware in your project, keep this:
export async function middleware(req: NextRequest, event: NextFetchEvent) {
 return NextResponse.next()
}
export const config = {
 unstable_allowDynamic: [
 '/node_modules/@nextui-org/calendar/dist/chunk-NABLCSM5.mjs',
 '/node_modules/@nextui-org/theme/dist/chunk-YSA7EQBH.mjs',
 '/node_modules/@nextui-org/calendar/dist/index.mjs',
 '/node_modules/@nextui-org/react/dist/index.mjs',
 '/node_modules/@nextui-org/theme/dist/index.mjs',
 '/node_modules/lodash.kebabcase/index.js',
 '/node_modules/lodash.debounce/index.js',
 '/node_modules/lodash.mapkeys/index.js',
 '/node_modules/lodash.omit/index.js',
 '/node_modules/lodash.get/index.js',
 ],
}

Answer 2

This solution to this error can be cited at the https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

In my case it was the lodash package that had something to do with build error and the solution for this is simply to add

export const config = {
 unstable_allowDynamic: [
 "**/node_modules/lodash/**", // use a glob to allow anything in the lodash library module
 ],
}

to your middleware

call the name of the package after node_modules/.

and then use a glob ** to allow everything from the package you just added