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

相关推荐
小喷友1 天前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
CF14年老兵1 天前
✅ Next.js 渲染速查表
前端·react.js·next.js
dyb1 天前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
在云端易逍遥2 天前
nextjs项目部署阿里云实践
docker·next.js
玲小珑2 天前
Next.js 教程系列(二十一)核心 Web Vitals 与性能调优
前端·next.js
oil欧哟3 天前
🧐 我开发的 AI 文本纠错/润色工具 Text-Well 上线了~
前端·ai编程·next.js
玲小珑6 天前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
小喷友10 天前
第 5 章:静态资源与图片优化
前端·react.js·next.js
玲小珑10 天前
Next.js 教程系列(十八)国际化 (i18n) 与多语言支持
前端·next.js
gongzemin12 天前
调用DeepSeek API实现DeepSeek网页版
前端·后端·next.js