single-spa集成Vue2项目热重载时报cannot set properties of undefined错误

问题原因 #

该报错是single-spa微前端场景下Vue2子应用热重载的典型兼容问题：
Vue2内置的HMR运行时逻辑会默认尝试向当前应用根实例的上下文写入更新标记，而single-spa子应用经过挂载/卸载的生命周期循环后，旧的根实例已经被销毁释放，热重载触发时会访问到已经为undefined的实例引用，进而抛出错误。由于组件更新的核心逻辑在报错前已经执行完毕，所以热重载功能本身可以正常使用。

修复方案 #

• 方案1：兜底兼容HMR运行时逻辑（最通用）
  在子应用入口文件（通常为main.js）开头添加以下代码，适配single-spa下的上下文场景：

if (process.env.NODE_ENV === 'development') {
  // 防止HMR runtime未初始化
  window.__VUE_HMR_RUNTIME__ = window.__VUE_HMR_RUNTIME__ || {}
  // 拦截createRecord逻辑，防止上下文为空时抛出错误
  const rawCreateRecord = window.__VUE_HMR_RUNTIME__.createRecord
  window.__VUE_HMR_RUNTIME__.createRecord = function (...args) {
    return this ? rawCreateRecord?.apply(this, args) : null
  }
  // 拦截reload逻辑，防止上下文为空时抛出错误
  const rawReload = window.__VUE_HMR_RUNTIME__.reload
  window.__VUE_HMR_RUNTIME__.reload = function (...args) {
    return this ? rawReload?.apply(this, args) : null
  }
}

• 方案2：绑定热重载的根实例引用
  在子应用的single-spa生命周期逻辑中，开发环境下临时挂载根实例供HMR访问：

let appInstance = null
export const mount = async (props) => {
  appInstance = new Vue({
    render: h => h(App)
  }).$mount(props.container)
  // 开发环境下暴露根实例给HMR runtime
  if (process.env.NODE_ENV === 'development') {
    window.__VUE_ROOT_INSTANCE__ = appInstance
  }
}

export const unmount = async () => {
  appInstance.$destroy()
  appInstance.$el.innerHTML = ''
  appInstance = null
  if (process.env.NODE_ENV === 'development') {
    delete window.__VUE_ROOT_INSTANCE__
  }
}

• 方案3：开发环境过滤冗余报错
  如果不需要完全修复，只想屏蔽控制台的错误提示，可以在Vue全局错误钩子中过滤该类报错：

Vue.config.errorHandler = (err) => {
  if (
    process.env.NODE_ENV === 'development' &&
    err.message.includes('Cannot set properties of undefined')
  ) {
    return
  }
  console.error(err)
}

内容的提问来源于stack exchange，提问作者Tomas Simanaitis