在WordPress中使用Hotwire Turbo遇Turbo未定义错误求解决

问题原因 #

你引入的是Turbo的ES模块版本，ES模块的变量默认不会暴露到全局作用域，而你的application.js是直接在全局环境中访问Turbo变量，因此触发未定义错误。

解决方案 #

提供三种可行的解决方式：

方法1：将application.js改为模块类型 #

如果application.js通过WordPress加载，先修改它的脚本标签为type="module"，然后在application.js中显式导入Turbo：

import * as Turbo from 'https://unpkg.com/@hotwired/turbo@7.3.0/dist/turbo.es2017-esm.js';
// 正常使用Turbo，例如初始化
Turbo.start();

同时在WordPress中给application.js的脚本标签添加模块属性，复用你现有的过滤器函数：

function set_scripts_type_attribute( $tag, $handle, $src ) {
    // 替换'application-js'为你实际注册application.js时用的handle
    if ( 'Turbo' === $handle || 'application-js' === $handle ) {
        $tag = '<script type="module" src="'. esc_url($src) .'"></script>';
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'set_scripts_type_attribute', 10, 3 );

方法2：手动将Turbo暴露到全局 #

创建一个中间模块脚本（比如turbo-global.js），在其中导入Turbo并挂载到window对象：

import * as Turbo from 'https://unpkg.com/@hotwired/turbo@7.3.0/dist/turbo.es2017-esm.js';
window.Turbo = Turbo;
Turbo.start();

在WordPress中引入这个脚本并设置为模块类型：

wp_enqueue_script('Turbo-Global', get_template_directory_uri() . '/js/turbo-global.js', array(), '7.3.0', false);

这样application.js就能在全局作用域访问到Turbo变量。

方法3：改用Turbo的UMD版本 #

如果不想处理ES模块的复杂逻辑，可以直接引入Turbo的UMD版本，它会自动将Turbo暴露为全局变量。修改你的wp_enqueue_script代码：

wp_enqueue_script('Turbo', 'https://unpkg.com/@hotwired/turbo@7.3.0/dist/turbo.min.js', array(), '7.3.0', false);

同时可以删除之前设置type="module"的过滤器函数，UMD版本不需要模块类型，加载完成后Turbo即可直接使用。

注意事项 #

• 使用方法1时，确保所有依赖模块的脚本都采用模块类型，避免混合加载导致顺序问题。
• 方法3的UMD版本兼容性更强，适合快速解决问题的场景。

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