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).*)"],
};
但是不管我如何更改,折腾了一天,打包时这个报错依然存在。
最后实在没办法,因为我使用 lodash-es 的 api
不多,最终删除了 lodash-es,拷贝 radash 的部分源码到本地,最后打包果然没问题。
这个可能是最笨最无奈的办法了,如果大家发现更好的解决方案,可以留言讨论,哈哈
Github
:next-admin
线上预览地址
:Next Admin
相关文章:
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
前言 最近一直在折腾 Nextjs15 ,也在断断续续地写《Next.js15 实战系列》的文章,后来总感觉文章如果没有线上效果预览差点意思,所以就想着先把目前做的项目先部署上线,后续再慢慢添加新功能。 因为之前没有部署过 Nextjs15 工程…...
owasp SQL 注入-03 (原理)
1: 先看一下注入界面: 点submit 后,可以看到有语法报错,说明已经起作用了: 报如下的错误: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near at line 1 2:…...
wireshark工具简介
目录 1 wireshark介绍 2 wireshark抓包流程 2.1 选择网卡 2.2 停止抓包 2.3 保存数据 3 wireshark过滤器设置 3.1 显示过滤器的设置 3.2 抓包过滤器 4 wireshark的封包列表与封包详情 4.1 封包列表 4.2 封包详情 参考文献 1 wireshark介绍 wireshark是非常流行的网络…...
队列的基本用法
以下是关于 C 语言中队列的详细知识,包括队列的生成、相关函数使用以及其他重要概念: 一、队列的概念 队列是一种线性数据结构,它遵循先进先出(First In First Out,FIFO)的原则,就像日常生活中…...
OpenHarmony-7.IDL工具
IDL 工具 1.openharmony IDL工具 在OpenHarmony中,当应用/系统服务的客户端和服务端进行IPC(Inter-Process Communication)跨线程通信时,需要定义双方都认可的接口,以保障双方可以成功通信,OpenHarmony ID…...
封装Redis工具类
基于StringRedisTemplate封装一个缓存工具类,满足以下需求: 方法1:将任意Java对象序列化为json并存储在string类型的key中,并且可以设置TTL过期时间 方法2:将任意Java对象序列化为json并存储在string类型的key中,并且可以设置TTL过期时间,用于处理缓存击穿问题 方法3:根据指定的…...
将n变为一个可以被表示为2^{a}+2^{b}的正整数m
给出一个正整数n,需要将n变为一个可以被表示为的正整数m,其中a和b都是非负整数且a!b,你可以进行两种操作: 1.令n加1 2.令n减1 请你求出最少需要多少次操作才能将n变成满足条件的m。 输入格式 输入一个整数,代表n。…...
第2章:Python TDD构建Dollar类基础
写在前面 这本书是我们老板推荐过的,我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后,我突然思考,对于测试开发工程师来说,什么才更有价值呢?如何让 AI 工具更好地辅助自己写代码,或许…...
搭建一个基于Spring Boot的校园台球厅人员与设备管理系统
搭建一个基于Spring Boot的校园台球厅人员与设备管理系统可以涵盖多个功能模块,例如用户管理、设备管理、预约管理、计费管理等。以下是一个简化的步骤指南,帮助你快速搭建一个基础的系统。 — 1. 项目初始化 使用 Spring Initializr 生成一个Spring …...
JavaScript系列(33)--微前端架构详解
JavaScript微前端架构详解 🏗️ 今天,让我们深入了解JavaScript的微前端架构,这是一种用于构建和管理大型前端应用的现代架构模式。 微前端基础概念 🌟 💡 小知识:微前端是一种将前端应用分解成更小、更易…...
第6章:Python TDD实例变量私有化探索
写在前面 这本书是我们老板推荐过的,我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后,我突然思考,对于测试开发工程师来说,什么才更有价值呢?如何让 AI 工具更好地辅助自己写代码,或许…...
Ubuntu 24.04 LTS 服务器折腾集
目录 Ubuntu 更改软件源Ubuntu 系统语言英文改中文windows 远程链接 Ubuntu 图形界面Windows 通过 openssh 连接 UbuntuUbuntu linux 文件权限Ubuntu 空闲硬盘挂载到 文件管理器的 other locationsUbuntu 开启 SMB 服务,并通过 windows 访问Ubuntu安装Tailscale&am…...
物联网在烟草行业的应用
物联网技术在烟草行业的应用 物联网技术在烟草行业的应用主要体现在以下几个方面: 智能制造 :物联网技术可以实现对生产过程中的关键参数进行实时监测,确保产品的质量稳定可靠。同时,通过对设备的远程维护和故障诊断,…...
2024年度总结:从后端Java到全栈成长的蜕变
目录 前言1. 用数据与实践书写成长篇章2. 技术与生活的双重蜕变3. 技术的进阶与生活的绽放 前言 今年是我入行的第十年,也是记录在CSDN平台上的第五年。这五年来,我始终坚持记录成长的点滴,将个人事业与博客创作紧密相连。一路走来࿰…...
详解构造函数和析构函数
⼀个类,我们不写的情况下编译器会默认⽣成以下6个默认成员函数。 下面我们详细介绍的是构造函数和析构函数,它们的主要作用分别是初始化工作和清理工作。 构造函数 1、构造函数的概念 构造函数虽名里带着“构造”但是其实际上并不是说开辟空间创建对…...
npm操作大全:从入门到精通
引言 在现代前端开发中,npm(Node Package Manager)是不可或缺的工具。无论是安装依赖、管理项目,还是发布自己的包,npm都扮演着重要的角色。本文将带你从npm的基础操作开始,逐步深入到高级用法,…...
ChatGPT 写作系列
ChatGPT 辅助写作 | 专栏 1 写作核心 先讲一下 ChatGPT 写作的核心。核心就是需要有文章大纲,而且文章大纲要足够细致。 具体怎么做呢? 提前准备多级标题大纲,刚开始有两个级别的标题就行,等用熟练了再细化。分一级标题&…...
kubernetes 集群搭建(kubeadm方式)
随着容器技术的日益普及,Kubernetes 作为最受欢迎的容器编排平台之一,已经成为现代云原生应用部署不可或缺的一部分。对于想要快速构建和管理 Kubernetes 集群的人来说,kubeadm 提供了一种简单而强大的工具。本文将详细介绍如何使用 kubeadm …...
OpenWrt 中使用 LuCI 界面部署 Docker 镜像
本篇博客将介绍如何在 OpenWrt 上使用 LuCI 部署 Docker 镜像,以 "hello-world" 镜像为例。 前提条件 已安装支持 Docker 的 OpenWrt 系统。 Docker 服务已在 OpenWrt 上成功安装并运行。 LuCI Docker 插件(luci-app-docker 或类似的管理界…...
阿里云 Serverless 助力盟主直播:高并发下的稳定性和成本优化
在直播场景中,阿里云 Serverless 应用引擎 SAE 提供的无缝弹性伸缩与极速部署能力,确保直播间高并发时的流畅体验,降低了我们的运营成本,简化了运维流程。结合阿里云云原生数据库 PolarDB 的 Serverless 能力,实现了数…...
C++ 多态 初学笔记
多态 虚函数虚函数的使用条件 虚函数详解对象多态多重继承时,类型转换的练习(1)情况1:(2)情况2:(3)情况3:(4)情况4: 对象多…...
深入剖析 Java 的 synchronized 锁升级过程
前言 在 Java 并发编程领域,synchronized关键字堪称保障线程安全的中流砥柱。随着 JDK 版本的迭代演进,synchronized锁的性能优化也在持续推进,其中锁升级机制尤为关键。本文将深度剖析synchronized锁从偏向锁、轻量级锁到重量级锁的升级历程…...
当文件补丁修改器因为文件操作权限有问题时,可以将文件拷贝到普通目录操作
文章目录 当文件补丁修改器因为文件操作权限有问题时,可以将文件拷贝到普通目录操作概述笔记直接在安装目录打补丁失败的情况将目标程序拷贝到补丁修改器的解压目录打补丁成功的情况备注END 当文件补丁修改器因为文件操作权限有问题时,可以将文件拷贝到普…...
【TCP】rfc文档
tcp协议相关rfc有哪些 TCP(传输控制协议)是一个复杂的协议,其设计和实现涉及多个RFC文档。以下是一些与TCP协议密切相关的RFC文档列表,按照时间顺序排列,涵盖了从基础定义到高级特性和优化的各个方面: 基…...
Linux探秘坊-------3.开发工具详解(1)
1 初识vim编辑器 创建第一个vim编辑的代码 1.新建文件 2.使用vim打开 3.打开默认是命令模式,写代码需要在屏幕上输出“i”字符 1.写完代码后要按Esc键退出到指令模式2.再按shift:wq即可保存并退出vim (因为不支持鼠标,通常 使用键盘上的箭…...
如何在Python中进行JSON数据的序列化和反序列化?
在Python中,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。Python内置的json模块提供了简单易用的方法来实现数据的序列化和反序列化。下面将详细介绍如何…...
SpringMVC (1)
目录 1. 什么是Spring Web MVC 1.1 MVC的定义 1.2 什么是Spring MVC 1.3 Spring Boot 1.3.1 创建一个Spring Boot项目 1.3.2 Spring Boot和Spring MVC之间的关系 2. 学习Spring MVC 2.1 SpringBoot 启动类 2.2 建立连接 1. 什么是Spring Web MVC 1.1 MVC的定义 MVC 是…...
Redis 3.2.1在Win10系统上的安装教程
诸神缄默不语-个人CSDN博文目录 这个文件可以跟我要,也可以从官网下载:https://github.com/MicrosoftArchive/redis/releases 这个是微软以前维护的Windows版Redis安装包,如果想要比较新的版本可以从别人维护的项目里下(https://…...
springboot医院信管系统
摘 要 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代&a…...
A6.Springboot-LLama3.2服务自动化构建(三)——编写Pipeline构建仓库初始化脚本
下面我们接着上一篇文章《A5.Springboot-LLama3.2服务自动化构建(二)——Jenkins流水线构建配置初始化设置》继续往下分析,编写Pipeline构建脚本。 一、统一Shell执行环境 Jenkins执行Shell脚本时,会在Jenkins节点上创建一个临时的环境来执行该脚本。这个环境包含了Jenki…...
Android 10.0 自定义Window窗口层级新增Type类型功能实现
1.前言 在10.0的系统rom定制化开发过程中,在产品开发过程中,需要新增Window窗口类型来显示 特殊的窗口层级,Window窗口就是根据Type类型来显示的,所以接下来需要新增Type类型来 新增Window窗口显示类型,如图 2.自定义Window窗口层级新增Type类型功能实现的核心类 framew…...
Linux中的基本指令(一)
一、Linux中指令的存在意义 Linux中,通过输入指令来让操作系统执行,以此达到控制操作系统的目的,类似于Windows中的双击,右键新建文件,新建文件夹等 1.补:关于屏幕的几个操作指令 ①清屏指令 clear 回…...
Ruby语言的循环实现
Ruby语言的循环实现深入探讨 在程序设计中,循环是一种常见的控制结构,用于重复执行某些代码块。不同的编程语言提供了不同类型的循环结构,以满足不同的需求。Ruby是一种灵活且易于使用的编程语言,其循环实现方式独具一格…...
使用docker-compose安装ELK(elasticsearch,logstash,kibana)并简单使用
首先服务器上需要安装docker已经docker-compose,如果没有,可以参考我之前写的文章进行安装。 https://blog.csdn.net/a_lllk/article/details/143382884?spm1001.2014.3001.5502 1.下载并启动elk容器 先创建一个网关,让所有的容器共用此网…...
《Keras 3 在 TPU 上的肺炎分类》
Keras 3 在 TPU 上的肺炎分类 作者:Amy MiHyun Jang创建日期:2020/07/28最后修改时间:2024/02/12描述:TPU 上的医学图像分类。 (i) 此示例使用 Keras 3 在 Colab 中查看 GitHub 源 简介 设置 本教程将介…...
团体程序设计天梯赛-练习集——L1-012 计算指数
前言 这道题简单至极,几行代码就全都解决了。这次多来几个写法; L1-012 计算指数 真的没骗你,这道才是简单题 —— 对任意给定的不超过 10 的正整数 n,要求你输出 2 的n次方 。不难吧? 输入格式: 输入…...
【机器学习】制造业转型:机器学习如何推动工业 4.0 的深度发展
我的个人主页 我的领域:人工智能篇,希望能帮助到大家!!!👍点赞 收藏❤ 引言 在当今科技飞速发展的时代,制造业正经历着前所未有的变革,工业4.0的浪潮席卷而来。工业4.0旨在通过将…...
深度学习篇---数据集分类
文章目录 前言第一部分:VOC数据集标签、COCO数据集格式1.VOC数据集标签的特点及优缺点特点优点缺点 2.COCO数据集标签的特点及优缺点特点优点缺点 3.YOLO数据集标签的特点及优缺点特点优点缺点 第二部分:VOC格式和YOLO格式1.VOC格式3.YOLO格式3.区别(1)文…...
力扣hot100之螺旋矩阵
class Solution:def spiralOrder(self, matrix: List[List[int]]) -> List[int]:# 用四个数对应4个遍历的方向[0, 1, 2, 3] - [右,下,左,上]go_state 0 # 起始必须向右# record_matrix [[0] * n for _ in range(m)]n_0, n_1, n_2, n_3 …...
嵌入式知识点总结 C/C++ 专题提升(一)-关键字
针对于嵌入式软件杂乱的知识点总结起来,提供给读者学习复习对下述内容的强化。 目录 1.C语言宏中"#“和"##"的用法 1.1.(#)字符串化操作符 1.2.(##)符号连接操作符 2.关键字volatile有什么含意?并举出三个不同的例子? 2.1.并行设备的硬件寄存…...
Android 高版本如何获取App安装列表?
有个需求需要获取App内的安装列表,但是现在在高版本Android中,只能获取到一部分App效果,我获取的代码如下: val calendar Calendar.getInstance()val packageManager context.packageManagerval usageStatsManager context.getSystemService(Context.USAGE_STATS_SERVICE) …...
StarGAN:原理、用途及最新发展
一、引言 StarGAN是一种具有广泛应用的生成模型,具有同时生成多种类别数据的能力。它由Yunjey Choi等人在2017年提出,旨在实现图像多域间迁移,尤其适用于人脸属性转换。StarGAN的提出,标志着生成对抗网络(Generative A…...
TCP报文格式与核心机制
TCP与UDP都是传输层的重要协议,TCP的特性包括有连接、可靠传输、面向字节流、全双工。 TCP的报文格式如下: 一、报文格式 1.源端口号、目的端口号 源端口和目的端口是五元组中重要的两个性质,源端口即数据是从哪里来的,目的端…...
【2024年华为OD机试】 (B卷,100分)- 金字塔,BOSS的收入(Java JS PythonC/C++)
一、问题描述 微商模式收入计算 题目描述 微商模式中,下级每赚 100 元就要上交 15 元。给定每个级别的收入,求出金字塔尖上的人的收入。 输入描述 第一行输入 N,表示有 N 个代理商上下级关系。接下来输入 N 行,每行三个数&am…...
缓存、数据库双写一致性解决方案
双写一致性问题的核心是确保数据库和缓存之间的数据同步,以避免缓存与数据库数据不同步的问题,尤其是在高并发和异步环境下。本文将探讨双写一致性面临的主要问题和解决方案,重点关注最终一致性。 本文讨论的是最终一致性问题 双写一致性面…...
开放银行数据保护与合规实践案例
总体原则 开放银行的数据处理基本原则指的是数据处理者在数据生命周期的各阶段进行各种数 据处理时均应遵循的根本准则,是指导监管机构制定规范、进行管理以及开放银行进 行具体数据处理行为的纲领。根据《民法典》《个人信息保护法》《数据安全法》 《网络安全法…...
51c自动驾驶~合集47
我自己的原文哦~ https://blog.51cto.com/whaosoft/13083194 #DreamDrive 性能爆拉30%!英伟达:时空一致下的生成重建大一统新方案~ 从自车的驾驶轨迹中生成真实的视觉图像是实现自动驾驶模型可扩展训练的关键一步。基于重建的方法从log中生成3D场景…...
2024年AI与大数据技术趋势洞察:跨领域创新与社会变革
目录 引言 技术洞察 1. 大模型技术的创新与开源推动 2. AI Agent 智能体平台技术 3. 多模态技术的兴起:跨领域应用的新风口 4. 强化学习与推荐系统:智能化决策的底层驱动 5. 开源工具与平台的快速发展:赋能技术创新 6. 技术安全与伦理:AI技术的双刃剑 7. 跨领域技…...
【protobuf】二、proto3语法详解①
文章目录 前言Ⅰ. 字段规则Ⅱ. 消息类型的定义和使用1、定义2、使用1️⃣消息类型可作为字段类型使⽤2️⃣可导入其他 .proto 文件的消息并使用 -- import 3、创建通讯录 2.0 版本的 .proto 文件4、通讯录 2.0 版本的读写实现 -- 第一种验证方式5、decode选项 -- 第二种验证方式…...
React 中hooks之useLayoutEffect 用法总结以及与useEffect的区别
React useLayoutEffect 1. useLayoutEffect 基本概念 useLayoutEffect 是 React 的一个 Hook,它的函数签名与 useEffect 完全相同,但它会在所有的 DOM 变更之后同步调用 effect。它可以用来读取 DOM 布局并同步触发重渲染。 2. useLayoutEffect vs us…...