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：

1. eval()
2. new Function()
3. WebAssembly.compile
4. 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).*)"],
};

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

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

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

Github：next-admin

线上预览地址：Next Admin