Noah
e988af8268
chore(deps): 升级前端三方依赖至最新稳定版并适配 ( #1710 )
...
* chore(deps): 升级 Next.js 14→16、React 18→19 及 TypeScript/ESLint/sass 工具链
- next 14.2 → 16.3.5(Turbopack 成为默认打包器,`output: 'export'` 与 out/ 页面文件名不变)
- react / react-dom 18.3 → 19.3,@types/react(-dom) 同步到 19.3
- qrcode.react 3 → 4、react-json-tree 0.19 → 0.20:仅为满足 React 19 的 peerDependency,API 用法不变
- typescript 5.9 → 6.0.3;tsconfig `target` es5 → ES2017(TS 6 弃用 es5,TS 7 已移除),
`jsx` preserve → react-jsx(Next 16 强制),include 补 `.next/dev/types`
- next-env.d.ts 改为由 Next 生成、不再入库(官方文档要求,且 dev/build 会写入不同内容;
仓库 .gitignore 已有 `/*.ts` 规则覆盖)
- eslint 8 → 9.39.5,eslint-config-next 16,eslint-config-prettier 10:
Next 16 移除了 `next lint`,`.eslintrc.json` 迁移为 flat config `eslint.config.mjs`,
`npm run lint` 改为直接调用 `eslint .`;eslint-plugin-react-hooks 7 新增的
React Compiler 规则暂降为 warn(命中的都是既有写法,与本次升级无关)
- sass 1.97 → 1.104、@types/node 20 → 26(仅类型)
- next.config.js 关闭 Next 16.3 新增的 `agentRules`,避免 `next dev` 在仓库根目录生成 AGENTS.md
未升到最新的两项及原因:
- typescript 7.0.2 为原生实现、不再提供 JS API,eslint-config-next 依赖的 typescript-eslint
明确拒绝 TS 7(`>=4.8.4 <6.1.0`),故停在 6.0.3
- eslint 10 移除了 `context.getFilename()`,eslint-config-next 依赖的 eslint-plugin-react 7.37.5
尚未适配(peer `^9.7`),故停在 9.x 最后一版
* fix(ui): 适配 React 19 的类型变更
@types/react 19 带来的四类编译错误,逐个按最小改动处理,不涉及运行时逻辑:
- `useRef<T>()` 不再允许省略初始值 → `useRef<FormApi>(undefined)`(6 处,`.current` 类型不变)
- `useRef<HTMLDivElement>(null)` 现返回 `RefObject<HTMLDivElement | null>`,
logviewer 的 `LogContent` props 类型同步放宽
- 全局 `JSX` 命名空间被移除 → `React.JSX.Element`(AvatarCard)
- `ReactElement` 的 props 默认类型由 `any` 改为 `unknown`,
TemplateModal / OverrideModal 里 `cloneElement` 注入 onClick 的地方给 `isValidElement`
标注具体的 props 形状,替代原来的 `<any>`
- 顺带删掉 layout.tsx 里一条已无作用的 `eslint-disable-next-line react-hooks/exhaustive-deps`
(eslint-plugin-react-hooks 7 对该处不再报告,ESLint 会提示未使用的 disable 指令)
* chore(deps): 升级 Semi Design 2.89→2.103 及 swr/artplayer/mpegts.js,适配 ArrayField.add 新签名
- @douyinfe/semi-ui 2.89.1 → 2.103.0(semi-icons / semi-foundation 随之同步),同一 major,
用到的 Form / Tabs / Collapse / Modal / Table / Select 等组件 API 未变
- ArrayField 的 `add` 由 `() => void` 变为 `(index?: number) => void`(支持在指定位置插入),
原来直接写 `onClick={add}` 会把 MouseEvent 当 index 传入且不再通过类型检查,
7 处改为 `onClick={() => add()}`,行为仍是追加到末尾
- swr 2.3.8 → 2.5.1、artplayer 5.3.0 → 5.4.0、mpegts.js 1.8.0 → 1.8.2:均为 minor/patch,无 API 变更
* chore(deps): 移除无引用的 ncp
`rg ncp` 在 app/、脚本与配置里均无命中(仅 CHANGELOG 提到 #1265 曾把它移出 dependencies),
是早年从 Svelte 前端遗留下来的复制工具,当前构建链(next build → out/ → rust-embed)用不到。
* fix(ui): 站内 Link 关闭预取,消除 Next 16 预取样式触发的 preload 警告
Next 16 的 Link 进入视口即预取目标路由的 RSC 载荷,载荷里的 `HL` 样式提示会让 React 为
目标页的每个 CSS 分块插入 `<link rel="preload" as="style">`;页面停留数秒后 Chrome 会对每个
未使用的预加载报一条 "was preloaded using link preload but not used" 警告。侧栏 9 个链接常驻
视口,配合 Turbopack 的细粒度 CSS 分块,每页会稳定出现 20+ 条(Next 14 下为 0)。
站内导航共 6 处 Link,全部加 `prefetch={false}`:静态导出由本机 axum 直接服务,点击时再拉取
几 KB 的路由载荷,实测 9 个侧栏页面客户端切换均正常且耗时 <150 ms;之后 6 秒停留 0 警告。
本 commit 可独立丢弃:丢弃后功能不受影响,只是控制台会有上述预加载警告。
* fix(ui): 在根布局最先导入 Semi Design 的 React 19 适配器
React 19 从 `react-dom` 上移除了 `render` / `unmountComponentAtNode`,也不再从 `react-dom`
re-export `createRoot`。Semi 的 Toast / Notification / Spin 图标等命令式渲染走
`_utils/reactRender.js`,在 React 19 下既拿不到 legacy render 也拿不到 createRoot,
会打印 "[Semi UI] createRoot is not available" 并**静默不渲染**——表现为保存成功 / 失败的
Toast 与 Notification 全部消失、日志页 Spin 不显示。
按 Semi 官方文档(semi.design/zh-CN/ecosystem/react19)在根布局第一行导入
`@douyinfe/semi-ui/react19-adapter`,它把 `react-dom/client` 的 createRoot 注入
`semiGlobal.config`。验证:空间配置页保存成功 / 校验失败的 Toast 正常弹出,
日志页 console 0 error。
* fix(ui): 消除 React 19 开发模式下的水合属性与 Fragment props 警告
开发模式(StrictMode)逐页走查 13 个页面,React 19 报两类新错误,均为既有写法在新版本下
被更严格地校验,生产构建不受影响:
- 每页一条 "A tree hydrated but some attributes of the server rendered HTML didn't match":
差异只有 `<html>` / `<body>` 上由 <head> 内联脚本在水合前写入的 theme-mode 属性
(React 18 下同一原因表现为 "Extra attributes from the server: theme-mode")。
这是首屏防闪烁的有意行为,按 React 官方做法给这两个元素加 suppressHydrationWarning,
只屏蔽元素自身的属性差异,不影响子树校验。
- 直播管理页每张卡片一条 "Invalid prop `disabled` supplied to React.Fragment":
操作按钮以 Fragment 形式作为 Semi ButtonGroup 的唯一子元素,ButtonGroup 会对直接子元素
cloneElement 注入 disabled / size / type,React 19 起会对 Fragment 上的这些 props 报错。
改为返回带 key 的元素数组,DOM 结构与样式不变(子元素均非 Button 类型,不会插入分隔线)。
处理后开发模式 13 页 console 仅剩 mock 环境有意返回的 500。
2026-09-22 06:42:07 +00:00
Noah