为什么升级到Alpinejs 3.x后原有Codepen示例无法正常运行？

你遇到的报错是Alpine 3.x相对于2.x存在大量不兼容的语法变更导致的，核心修改要点如下：

• 调整脚本加载顺序：所有自定义数据、全局状态、组件的注册代码必须放在Alpine引入标签之前，否则注册逻辑会在Alpine初始化完成后执行，无法被识别。
• 显式注册自定义数据：2.x支持直接将组件逻辑函数挂载到window对象上，在x-data中直接调用函数名即可使用，3.x需要显式调用Alpine.data()完成注册，示例如下：

// 2.x原有写法
function modal() {
  return {
    show: false,
    // 其余业务逻辑
  }
}

// 3.x修改后写法
function modal() {
  return {
    show: false,
    // 其余业务逻辑
  }
}
Alpine.data('modal', modal)

• 替换废弃API：检查代码中是否使用了2.x的废弃语法，比如原$node魔法属性替换为$el，原x-transition自定义类名语法调整为3.x要求的对应格式。
• 手动触发初始化：如果你的自定义注册逻辑放在了Alpine引入标签之后，需要在所有注册代码执行完成后手动调用Alpine.start()完成初始化，覆盖默认的自动初始化逻辑。

完成上述修改后，原有功能即可正常运行。

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