一句话

JS 里未 import/未声明的裸标识符会向上解析到 window 上的同名全局。现代浏览器暴露了 window.Navigation（Navigation API，Chrome 102+）等 WebIDL 接口对象，React 把它当组件 <Navigation …/> 渲染、调用它时抛 TypeError: Illegal constructor，且组件栈显示 <Navigation>。

发生条件

  • 在 .jsx/.js 中把未 import 的 Navigation（或 Location/History/Worker/Response 等 WebIDL 接口名）当作值使用，例如图标映射 icon: Navigation,、交通: Navigation,。
  • 只在现代浏览器暴露该 WebIDL 接口时爆（window.Navigation Chrome 102+）。老浏览器里该全局是 undefined，会报另一种错（Element type is invalid … got undefined），症状因内核而异。
  • 被渲染的组件才触发——本项目里只有「登录后进管理大厅 /admin」渲染到该模块卡片才崩；首页、未登录都正常。

症状

  • 控制台：Uncaught TypeError: Illegal constructor
  • 堆栈顶层是 rm(renderWithHooks) 等 React 内部函数，:82:48601 这类行号对内联 bundle 指向 v=o(u,p)（组件调用点）；dev 模式 React 会补一句 An error occurred in the <Navigation> component.
  • 诊断兜底 overlay：页面加载/执行错误 … @ <页面url>:<行>（内联 module 报的是文档绝对行号）

根因

frontend/src/admin/AdminLobby.jsx 用 icon: Navigation 但 lucide 导入列表漏了 Navigation → 该标识符解析到 window.Navigation（WebIDL Navigation API 接口对象，非构造函数语义），React renderWithHooks 对函数组件调用 o(u,p) 即 Navigation(props) → 浏览器对 WebIDL 构造器报 Illegal constructor。

修复

import { ..., FlaskConical, Navigation } from 'lucide-react';

即把漏导的 Navigation 加进 import。排查同类隐患：脚本对 src 全量扫「icon:/映射里的大写标识符 是否在 import 集合中且命中 WebIDL 全局名单」。

下次识别

  • 报错 Illegal constructor + 组件名是个大写单词（Navigation/Location/History/…）→ 先怀疑该名字没 import，去代码里 grep 它是否在 import 列表里。
  • React 组件栈里的 <X> 不是 lucide 图标时，查 X 是否为 window.X 的 WebIDL 接口。
  • 只在登录态/特定路由触发 → 说明该组件只在那个分支渲染。

相关

  • 内联 ES module 的报错行号是文档绝对行号（bundle 内联进 <script type="module"> 后，列号可用）；诊断用 sourcemap 或 dev 模式拿真实组件名。
  • React renderWithHooks / updateFunctionComponent 生产栈不显示组件名，dev 模式会显示 <Navigation>。

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Frontend