为元素添加x-ref指令后页面加载出现Uncaught TypeError: root is undefined错误

问题场景 #

给div添加x-ref="commandview"后，页面加载时抛出Uncaught TypeError: root is undefined错误，报错代码位于Alpine源码的x-ref.js中：

// packages/alpinejs/src/directives/x-ref.js
function handler3() {
}
handler3.inline = (el, { expression }, { cleanup: cleanup2 }) => {
  let root = closestRoot(el);
  if (!root._x_refs) // 错误触发位置：root为undefined
    root._x_refs = {};
  root._x_refs[expression] = el;
  cleanup2(() => delete root._x_refs[expression]);
};
directive("ref", handler3);

原因分析 #

Alpine.js的x-ref指令依赖Alpine组件根实例（即带有x-data的元素）来存储引用。如果x-ref元素不在任何x-data包裹的作用域内，closestRoot(el)无法找到对应的根实例，就会返回undefined，进而触发报错。

解决办法 #

• 给x-ref元素的父级添加x-data（哪怕是空对象），将其纳入Alpine组件作用域：

<div x-data="{ }">
  <div x-ref="commandview"></div>
</div>

• 如果该div本身就是页面级根元素，直接给它添加x-data：

<div x-data="{ }" x-ref="commandview"></div>

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