动态创建DIV挂载Vue3实例报错：value cannot be made reactive: null

错误原因排查 #

你最初的main.js代码里，动态创建的div已经通过appendChild添加到body，此时DOM元素已经存在，不是挂载时机的问题。报错value cannot be made reactive: null的核心原因是：Vue的响应式系统中，reactive API无法将null或基本类型值转为响应式（reactive仅支持对象、数组等复杂类型），这个问题大概率出在你的App.vue或其子组件的响应式数据定义中，而非挂载逻辑本身。

无效尝试的问题 #

你在组件setup的onMounted里创建新Vue实例的写法，属于嵌套Vue应用的场景，和你原本的需求（挂载主应用）无关，自然无法解决原错误。

正确解决步骤 #

1. 排查响应式代码
   检查App.vue及所有子组件，找到类似以下的错误写法：

   // 错误：reactive不能处理null
   const data = reactive(null)
   

   改成使用ref（支持null、基本类型）：

   // 正确
   const data = ref(null)
   

2. 验证挂载逻辑
   若要确认挂载逻辑是否正常，可以临时替换App为一个极简组件测试：

   // main.js中替换原App导入
   const app = createApp({ template: '<div>测试挂载</div>' }).use(store);
   let div = document.createElement("div");
   div.setAttribute("id", "widget"); // 可以先设置id再append，顺序不影响
   document.body.appendChild(div);
   app.mount("#widget");
   

   如果这段代码能正常运行，说明原问题确实出在App组件内部。

3. 关于挂载时机
   不需要在App组件或包装组件的onMounted里挂载主应用，main.js作为应用入口，直接在这里处理挂载逻辑是合理的，只要确保挂载时目标DOM元素已存在即可（你的原代码已经满足这一点）。

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