Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?

前言

最近一直在折腾 Nextjs15 ,也在断断续续地写《Next.js15 实战系列》的文章,后来总感觉文章如果没有线上效果预览差点意思,所以就想着先把目前做的项目先部署上线,后续再慢慢添加新功能。

因为之前没有部署过 Nextjs15 工程项目,我就隐约感觉没有那么简单,果不其然,开发环境一切正常,打包构建时一堆报错。

问题分析

控制台报错日志:

txt 复制代码
../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_root.js
profile:build: Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
profile:build: Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
profile:build: 
profile:build: Import trace for requested module:
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_root.js
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isBuffer.js
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js
profile:build: ./src/utils/Fetcher.ts
profile:build: ./src/@types/schema.ts
profile:build: 
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/template.js
profile:build: Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
profile:build: Used by default
profile:build: Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
profile:build: 
profile:build: Import trace for requested module:
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/template.js
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js
profile:build: ./src/utils/Fetcher.ts
profile:build: ./src/@types/schema.ts

很明显,这是由于工程中使用了 lodash-es 产生的报错。

我就纳闷了,开发环境使用 lodash-es 一切正常,能有什么报错?

我跑到 Nextjs15issues 寻找原因,发现真的有人有同样的问题 - #51401,了解更多:Dynamic code evaluation is not available in Middleware

具体而言,不支持以下 api

  1. eval()
  2. new Function()
  3. WebAssembly.compile
  4. WebAssembly.instantiate

应该是 lodash-es 的源码中包含了其中的 api ,导致打包报错。

解决问题

一开始我按照官网和 #51401 的方案去尝试解决问题

js 复制代码
export const config = {
  runtime: "experimental-edge",
  unstable_allowDynamic: [
    "/src/utils/Fetcher.ts",
    "/src/@types/schema.ts",
    "*/`/node_modules/lodash-es/`",
  ],
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

但是不管我如何更改,折腾了一天,打包时这个报错依然存在。

最后实在没办法,因为我使用 lodash-esapi 不多,最终删除了 lodash-es,拷贝 radash 的部分源码到本地,最后打包果然没问题。

这个可能是最笨最无奈的办法了,如果大家发现更好的解决方案,可以留言讨论,哈哈

Githubnext-admin

线上预览地址Next Admin

相关推荐
小刘鸭地下城3 天前
Next.js 性能优化指南
next.js
Mintopia8 天前
Next.js 内置后端能力扩展 —— 重定向与路由保护
前端·javascript·next.js
JacksonGao9 天前
Next.js的App router和Pages router的区别你知道多少?
react.js·next.js
Mintopia10 天前
🚪 当 Next.js 中间件穿上保安制服:请求拦截与权限控制的底层奇幻之旅
前端·后端·next.js
Mintopia13 天前
🚀 Next.js 后端能力扩展:错误处理与 HTTP 状态码规范
前端·javascript·next.js
Mintopia13 天前
🧭 新一代 Next.js App Router 下的 Route Handlers —— 从原理到优雅实践
前端·javascript·next.js
OEC小胖胖14 天前
SEO 优化:元数据 (Metadata) API 和站点地图 (Sitemap) 生成
前端·javascript·前端框架·html·web·next.js
可乐爱宅着15 天前
如何在next.js中处理表单提交
前端·next.js
Mintopia15 天前
在 Next.js 中开垦后端的第一块菜地:/pages/api 的 REST 接口
前端·javascript·next.js
Mintopia18 天前
Next.js + AI-SDK + DeepSeek:3 分钟建设属于你的 AI 问答 Demo
前端·javascript·next.js