Strapi后台缓存报错解决

我的报错问题是：

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at kIe (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:26180) at O0 (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:25884) at kIe (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:26417) at O0 (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:25884) at kIe (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:26635) at O0 (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:25884) at kIe (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:26080) at O0 (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:25884) at kIe (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:26635) at O0 (https://api.wuyilin18.top/admin/strapi-CCO_PXc5.js:42:25884)

我的出现报错原因是浏览器插件冲突问题，解决方法是使用浏览器无痕模式或更换浏览器。

问题分析

遇到的错误是 NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.。

1. 错误类型 : 这是一个典型的 DOM 操作错误，发生在浏览器前端，而不是 Strapi 的后端服务器。

2. 错误提示 : JavaScript 代码尝试从一个父 DOM 节点上移除一个子节点，但在执行这个操作时，发现那个所谓的“子节点”其实并不存在于那个“父节点”之下。

3. 发生场景 :

• 错误堆栈指向一个被压缩和混淆过的 JS 文件 (strapi-CCO_PXc5.js)，这是 Strapi 管理后台经过 build命令打包后的产物。这使得我们无法直接从代码中看出是哪个组件出了问题。

• 错误信息中提到了 React Router caught the following error during render，这表明错误发生在 React 组件的渲染或卸载过程中，很可能是某个组件在卸载(卸载) 时，试图清理自己创建的 DOM 元素，但由于某些原因（比如已经被其他代码移除了），导致了这个错误。

为什么会发生这种错误？

在像 React 这样的现代前端框架中，这种错误通常不是由你直接写的代码引起的，而是由以下几种情况触发：

1. 浏览器插件/扩展冲突：这是最常见的原因。很多浏览器插件（尤其是广告拦截、密码管理、翻译、美化页面等插件）会向页面注入自己的脚本和修改 DOM 结构，这可能会干扰 Strapi Admin UI 的正常运行，导致 React 的 VDOM (虚拟DOM) 与真实 DOM 不一致。

2. 缓存问题：浏览器或代理服务器（如 Nginx）缓存了旧的前端静态资源（JS/CSS文件），导致加载的文件版本不匹配。

3. Strapi 插件冲突：你安装的某个第三方 Strapi 插件可能与你当前的 Strapi 版本不兼容，或者插件之间存在冲突。插件可能会向管理后台注入自己的 React 组件，如果这些组件存在 Bug，就会引发问题。

4. Strapi 版本 Bug：在极少数情况下，可能是你正在使用的 Strapi 版本本身存在一个 Bug。

5. 构建产物损坏：build 目录下的前端文件可能已损坏或不完整。

解决方案（按可能性从高到低排序）

请按照以下步骤逐一排查：

步骤 1：排除浏览器环境问题（最可能的原因）

1. 清除浏览器缓存：强制刷新页面（Windows: Ctrl + F5, Mac: Cmd + Shift + R）或者在浏览器设置里彻底清除缓存和站点数据。

2. 使用无痕/隐私模式：打开一个新的无痕窗口访问你的 Strapi 后台。无痕模式通常会禁用大部分插件。如果无痕模式下一切正常，那么 100% 是某个浏览器插件引起的。

3. 禁用所有浏览器插件：如果无痕模式有效，回到正常模式，逐个禁用你的浏览器插件，每禁用一个就刷新一下 Strapi 后台，直到找到引起问题的那个插件。

4. 更换浏览器：尝试使用一个你平时不用的、干净的浏览器（比如 Edge、Firefox、Chrome）访问后台，看是否还有问题。

步骤 2：重建管理后台 UI

如果排除了浏览器问题，那么可能是构建产物出了问题。你需要重新构建 Strapi Admin UI。

1. 停止 Strapi 服务。

2. 在你的 Strapi 项目根目录下，删除旧的构建文件：

3. 重新安装依赖 (可选但推荐，以防万一)：

4.重新构建 Admin UI：

5. 重新启动 Strapi 服务：

6. 再次清除浏览器缓存后访问后台。

步骤 3：排查 Strapi 插件冲突

如果问题依然存在，很可能是某个插件导致的。

1. 检查插件列表：在你的package.json文件中查看安装了哪些第三方插件（非 @strapi/ 开头的）。

2. 暂时禁用插件：

• 创建一个 config/plugins.js文件（如果不存在的话）。

• 在文件中禁用某个可疑的第三方插件。例如，如果你怀疑一个名为 strapi-plugin-my-plugin的插件，可以这样配置：

• 修改配置后，你需要重复步骤 2 中的重建操作 (rm -rf .cache build, npm run build)，然后重启服务查看问题是否解决。

• 如果问题解决，你就找到了冲突的插件。你可以检查该插件是否有更新，或者到其 GitHub 仓库报告问题。

步骤 4：检查版本兼容性

• 检查 Node.js 版本：确保你使用的 Node.js 版本是 Strapi 官方推荐的 LTS 版本。

• 更新 Strapi：检查你的 Strapi 版本是否过旧，可以考虑将其和你安装的插件都更新到最新的稳定版。

总结

这个问题大概率是由 浏览器插件 引起的。请务必最先尝试 “使用无痕模式访问” 这个方法，它能最快地帮你定位问题。

如果以上方法都无法解决，请提供以下信息，以便进一步分析：

1. 你的 Strapi 版本 (npm list strapi 或查看 package.json)。

2. 你的 Node.js 版本 (node -v)。

3. 你在 package.json 中安装的插件列表。