Next.js集成NextUI Select组件构建时Edge Runtime报错求助

架构老林

2026-6-24

解决Next.js 14.1.3 + NextUI Select组件构建时Edge Runtime错误

问题原因

NextUI Select组件依赖的部分lodash模块在Edge Runtime环境下会触发动态代码评估（如new Function），而Next.js的Edge Runtime默认禁止这类操作，导致构建失败。开发模式正常是因为开发环境未严格启用Edge Runtime的限制。

具体解决办法

1. 移除Root Layout的Edge Runtime配置（优先推荐）

如果项目不需要Edge Runtime，直接删除Root Layout中的runtime: 'edge'配置，使用默认的Node.js Runtime：

// app/layout.jsx
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}
// 移除这一行：export const runtime = 'edge';

2. 将Select组件标记为客户端组件

若必须保留Edge Runtime，需将使用Select的组件标记为客户端组件（运行在浏览器环境，不受Edge Runtime限制），在组件顶部添加'use client'指令：

'use client';

import { Select, SelectItem } from '@nextui-org/select';

export default function CustomSelect() {
  return (
    <Select placeholder="选择选项">
      <SelectItem key="option1" value="option1">选项1</SelectItem>
      <SelectItem key="option2" value="option2">选项2</SelectItem>
    </Select>
  );
}

3. 转译NextUI及lodash相关包

在next.config.js中添加transpilePackages配置，强制转译NextUI和lodash相关依赖，避免未转译的代码触发动态评估：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['nextui', '@nextui-org/select', 'lodash-es'],
};

module.exports = nextConfig;