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

前言

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

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

问题分析

控制台报错日志：

../../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 一切正常，能有什么报错？

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

具体而言，不支持以下 api：

eval()
new Function()
WebAssembly.compile
WebAssembly.instantiate

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

解决问题

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

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).*)"],
};