amis6.13版本报错“Unhandled Rejection (Error): [mobx-state-tree] You are trying to ...”的解决方案
目录
amis页面报错：
原因：
解决方案
一、patch打补丁
二、参照mapping文件重写reload方法，自行加上catch
三、原型继承，再加上catch
amis页面报错：
Unhandled Rejection (Error): [mobx-state-tree] You are trying to read or write to an object that is no longer part of a state tree. (Object type: 'MappingStore', Path upon death: '', Subpath: 'fetching', Action: '.load()'). Either detach nodes first, or don't use objects after removing / replacing them in the tree.
原因：
1.amis 报错"默认显示在页面上"是 RootRenderer 内置的,没有项目级开关把它改成"只进控制台"(errorCatcher 即便设了,setRuntimeError仍会执行,页面 alert 照样出)。所以像 store.load 这种异步拒绝,最干净的做法就是——在源头 .catch 吃掉(mappingstoreLoadFix.ts),不让它变成未捕获拒绝/触发 RootRenderer。
2.多见于type为select和mapping的场景。
解决方案
在动手之前，可以先通过下表对比三种方案的取舍：
| 维度 | patch 打补丁 | 重写 reload 方法 | 原型继承加 catch |
|---|---|---|---|
| 侵入性 | 直接修改 amis 源码，侵入性强 | 不修改源码，重写组件原型方法，侵入性中等 | 不修改源码，只在原方法上包装一层，侵入性较低 |
| 维护成本 | 较高，amis 升级后需要重新生成和维护 patch | 中等，需要跟随 amis 的 reload 逻辑同步调整 | 较低，不影响 reload 业务逻辑，无需复制实现 |
| 适用场景 | 需要修复库内部深层逻辑，且能接受锁定版本 | 需要完全掌控 reload 行为，或原有逻辑较简单 | 只想补充错误兜底，保留原有 reload 行为 |
| 升级影响 | 升级 amis 时 patch 可能冲突或失效 | reload 签名、逻辑变化时需要同步修改 | 用(...args)透传，签名变化基本不受影响 |
综合来看，如果只是要解决MappingStore.load未捕获拒绝的问题，优先推荐「原型继承加 catch」方案；只有需要改动库内部实现细节时，才考虑 patch 打补丁。
一、patch打补丁
package.json
"pnpm": { "overrides": { "webworkify-webpack": "^2.1.5", "rollup": "4.46.0" }, "patchedDependencies": { "amis@6.13.0": "patches/amis@6.13.0.patch" } }patches/amis@6.13.0.patch
diff --git a/esm/renderers/Mapping.js b/esm/renderers/Mapping.js index 4fea3ec4f4fc82dd90e42f9602ee6da24c19231b..5f78d5d1030e5d95c72e16fab4d55da5928503ae 100644 --- a/esm/renderers/Mapping.js +++ b/esm/renderers/Mapping.js @@ -8,7 +8,7 @@ import { __generator, __assign, __extends, __decorate } from 'tslib'; import React from 'react'; import { StoreNode, normalizeApiResponseData, isObject, guid, isPureVariable, resolveVariableAndFilter, isApiOutdated, isEffectiveApi, normalizeApi, createObject, getPropValue, Renderer } from 'amis-core'; import { withStore } from 'amis-ui'; -import { types, flow } from 'mobx-state-tree'; +import { types, flow, isAlive } from 'mobx-state-tree'; var _a; var Store = StoreNode.named('MappingStore') @@ -30,14 +30,16 @@ var Store = StoreNode.named('MappingStore') case 1: ret = _a.sent(); if (ret.ok) { data_1 = normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); if (isAlive(self)) { data_1 = normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); } } else { throw new Error(ret.msg || 'fetch error'); @@ -45,10 +47,14 @@ var Store = StoreNode.named('MappingStore') return [3 /break/, 4]; case 2: e_1 = _a.sent(); self.errorMsg = e_1.message; if (isAlive(self)) { self.errorMsg = e_1.message; } return [3 /*break*/, 4]; case 3: self.fetching = false; if (isAlive(self)) { self.fetching = false; } return [7 /*endfinally*/]; case 4: return [2 /*return*/]; } diff --git a/lib/renderers/Mapping.js b/lib/renderers/Mapping.js index 5329a9ed82d2f3985e53b92c32c193dcd144c86b..be1358311f53bf5c2b9f0ff2ea8446ce850390d9 100644 --- a/lib/renderers/Mapping.js +++ b/lib/renderers/Mapping.js @@ -42,18 +42,24 @@ var Store = amisCore.StoreNode.named('MappingStore').props({ case 1: ret = _a.sent(); if (ret.ok) { data_1 = amisCore.normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); if (mobxStateTree.isAlive(self)) { data_1 = amisCore.normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); } } else { throw new Error(ret.msg || 'fetch error'); } return [3 /*break*/, 4]; case 2: e_1 = _a.sent(); self.errorMsg = e_1.message; if (mobxStateTree.isAlive(self)) { self.errorMsg = e_1.message; } return [3 /*break*/, 4]; case 3: self.fetching = false; if (mobxStateTree.isAlive(self)) { self.fetching = false; } return [7 /*endfinally*/]; case 4: return [2 /*return*/];删除pnpm-lock.yaml
rm -rf pnpm-lock.yaml删除node_modules
rm -rf node_modules重新下载
pnpm install重新运行
npm run dev二、参照mapping文件重写reload方法，自行加上catch
mappingstoreLoadFix.js
// amis 6.13 已知问题:Mapping 渲染器的 MappingStore.load 是 MST flow, // 组件 unmount 时 amis-ui 的 withStore 会 destroy(store),但 in-flight 的 // load 不会取消,flow 的 finally { self.fetching = false } 会写入已销毁的 // store,抛 "[mobx-state-tree] You are trying to read or write to an object // that is no longer part of a state tree" 未捕获拒绝。 // main.tsx 里的 unhandledrejection preventDefault 拦不住它:dev 环境 umi 的 // webpackHotDevClient 自己注册了 unhandledrejection 监听且不看 defaultPrevented, // 照样弹 "Unhandled Rejection" 红色弹层。所以必须让 rejection 根本不发生。 // // 根因:amis/esm/renderers/Mapping.js 里 reload() 调用 store.load(...) 没有 catch。 // 修复(不打 patch、不改 node_modules):withStore HOC 会把被包装的内部组件挂到 // 包装类的 ComposedComponent 静态属性上(见 amis-ui/esm/components/WithStore.js), // 沿原型链找到 reload,替换为逻辑完全一致的版本,唯一差异是给 store.load // 返回的 promise 补 .catch,吃掉 store 已销毁后的 MST 写入异常。 // // 必须在 amis.render() 之前执行(本模块由 customRenderers.ts 引入,renderer.tsx // 保证其在 render 前加载);对之后创建的所有 mapping 组件实例生效。 import { isPureVariable, resolveVariableAndFilter, isEffectiveApi, normalizeApi } from 'amis'; // amis 入口不导出 MappingField,直接从子路径引。amis 的 package.json exports 里 // "./lib/*" 的 import 条件映射到 "./esm/*.js",所以这里引 lib 路径实际拿到的 // 是 esm/renderers/Mapping.js,与 amis 内部引用是同一模块实例(vite/rollup 按解析路径去重)。 // @ts-ignore amis 没有为子路径模块提供类型声明 import { MappingField } from 'amis/lib/renderers/Mapping'; function patchMappingReload() { const Inner = (MappingField as any)?.ComposedComponent; if (!Inner) return; // mobx-react 的 observer() 可能包一层,沿原型链找真正定义 reload 的原型 let proto = Inner.prototype; while (proto && !Object.prototype.hasOwnProperty.call(proto, 'reload')) { proto = Object.getPrototypeOf(proto); } if (!proto || proto.__mappingLoadPatched) return; proto.__mappingLoadPatched = true; // 与 amis 6.13 renderers/Mapping.js 中 reload 的逻辑一致, // 仅给 store.load 的 promise 补 catch proto.reload = function(this: any) { const { source, data, env, store } = this.props; if (isPureVariable(source)) { store.setMap(resolveVariableAndFilter(source, data, '| raw')); } else if (isEffectiveApi(source, data)) { const api = normalizeApi(source, 'get'); api.cache = api.cache ?? 30 * 1000; try { store.load(env, api, data).catch((err: any) => { console.log(err, '=====err===store.load========='); }); } catch (err) { console.log(err, '=====err===try-catch========'); } } }; } patchMappingReload();三、原型继承，再加上catch
mappingstoreLoadFix.js
// amis 6.13 已知问题:Mapping 渲染器的 MappingStore.load 是 MST flow, // 组件 unmount 时 amis-ui 的 withStore 会 destroy(store),但 in-flight 的 // load 不会取消,flow 的 finally { self.fetching = false } 会写入已销毁的 // store,抛 "[mobx-state-tree] You are trying to read or write to an object // that is no longer part of a state tree" 未捕获拒绝。 // main.tsx 里的 unhandledrejection preventDefault 拦不住它:dev 环境 umi 的 // webpackHotDevClient 自己注册了 unhandledrejection 监听且不看 defaultPrevented, // 照样弹 "Unhandled Rejection" 红色弹层。所以必须让 rejection 根本不发生。 // // 修复思路(不打 patch、不改 node_modules): // 1. 沿原型链拿到组件真正的 reload 原型方法,不重写 reload 的业务逻辑, // 而是用包装函数包住原 reload 并原样转发入参(apply this, args), // 所以 amis 升级后 reload 的签名/逻辑怎么变都不影响本文件。 // 2. 给 store.load 包一层 catch:用 (...args) 透传所有入参,不硬编码 // store.load(env, api, data) 这种固定写法——load 的入参个数/顺序变了 // 本文件也照常工作。只把异常打到 console,不抛到页面。 // // 必须在 amis.render() 之前执行(本模块由 customRenderers.ts 引入,renderer.tsx // 保证其在 render 前加载);对之后创建的所有 mapping 组件实例生效。 // @ts-ignore amis 没有为子路径模块提供类型声明 import { MappingField } from 'amis/lib/renderers/Mapping'; // 给 store.load 包装 catch:用 ...args 透传,不依赖 load 的具体签名。 // load 是 MST flow,返回 promise;这里只在 promise 上补 catch, // 吃掉 store 销毁后 flow 写回时报的异常,其余行为原样保留。 function wrapStoreLoad(store: any) { if (!store || store.__mappingLoadPatched) return; store.__mappingLoadPatched = true; const originalLoad = store.load.bind(store); store.load = function(...args: any[]) { return originalLoad(...args).catch((err: any) => { console.warn('[amis Mapping] store.load rejected:', (err && err.message) || err); }); }; } function patchMappingReload() { const Inner = (MappingField as any)?.ComposedComponent; if (!Inner) return; // mobx-react 的 observer() 可能包一层,沿原型链找真正定义 reload 的原型 let proto = Inner.prototype; while (proto && !Object.prototype.hasOwnProperty.call(proto, 'reload')) { proto = Object.getPrototypeOf(proto); } if (!proto || proto.__mappingReloadPatched) return; proto.__mappingReloadPatched = true; // 不重写 reload 逻辑:包一层,先把当前组件的 store.load 补上 catch, // 再原样调用原 reload(签名、逻辑都跟着插件走,不硬编码)。 const originalReload = proto.reload; proto.reload = function(this: any, ...args: any[]) { const store = this.props && this.props.store; wrapStoreLoad(store); return originalReload.apply(this, args); }; } patchMappingReload();优点：
1. 用 (...args) 透传 store.load 的所有入参，插件升级改签名也不受影响。
2. 不重写 reload 业务逻辑，只包一层转发 originalReload.apply(this, args)
3. .catch 只把错误打到 console，不抛到页面。
注意vite.config.js的配置加上
optimizeDeps: { include: [ 'react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime', // src/amis/mappingstoreLoadFix.ts 深路径引用了 amis/lib/renderers/Mapping。 // 必须在这里显式声明,让它和 amis 在首次预构建的同一轮里被打包: // 1) 避免 dev 运行中发现新依赖触发重新预构建,旧 chunk 地址 504(Outdated // Optimize Dep),而本项目 hmr:false 收不到 full-reload,页面直接白屏; // 2) 同一轮多入口预构建会做代码分割,renderers/Mapping 模块被提到共享 chunk, // 保证 mappingstoreLoadFix拿到的 MappingField 与 amis 内部注册的是同一模块实例。 'amis', 'amis/lib/renderers/Mapping', ], },在入口页面加上
import { Renderer } from 'amis'; // amis mapping 渲染器 MappingStore 未捕获拒绝的运行时修复,须在 render 前执行 import './mappingstoreLoadFix';