WordPress子主题集成Supabase API遇报错求助

一、修复404资源找不到问题 #

你的请求URL同时混杂了插件目录和主题目录路径，是路径生成逻辑错误导致的：

• 你在子主题的functions.php里误用了plugin_dir_url(__FILE__)——这个函数是给插件用的，会返回插件目录URL，但你的node_modules在主题目录下，必须换成主题目录专属的URI函数。
• 把所有plugin_dir_url(__FILE__)替换为get_stylesheet_directory_uri()，这个函数会返回当前子主题的目录URL，确保路径指向正确。

修改后的脚本入队代码：

wp_enqueue_script("node_module-$dep", get_stylesheet_directory_uri() . "/node_modules/$dep/" . $subpackage[$use], $deps, $subpackage['version']);

样式入队代码同理修改：

wp_enqueue_style("node_module-$dep", get_stylesheet_directory_uri() . "/node_modules/$dep/" . $subpackage['style']);

二、修复「import declarations may only appear at top level of a module」错误 #

这个错误源于浏览器默认不把普通script标签当作ES模块，以下两种方式解决：

方式1：快速临时修复 #

直接给script标签添加type="module"属性，让浏览器识别为ES模块：

<script type="module">
    import { createClient } from '@supabase/supabase-js'
    const supabase = createClient('你的Supabase链接', '你的公钥')
</script>

注：这种方式可能存在路径解析风险，更推荐下面的规范做法。

方式2：WordPress规范脚本管理（推荐） #

1. 在子主题目录下新建js/supabase-init.js文件，写入初始化代码：

// 注意路径要对应主题内node_modules的位置
import { createClient } from '../node_modules/@supabase/supabase-js/dist/main/index.js';

const supabase = createClient('你的Supabase链接', '你的公钥');

// 可添加测试代码验证连接
async function testSupabase() {
    const { data, error } = await supabase.from('你的表名').select('*').limit(5);
    error ? console.error(error) : console.log('连接成功:', data);
}
testSupabase();

2. 在functions.php里添加脚本入队逻辑，并标记为模块类型：

// 入队Supabase初始化脚本
wp_enqueue_script(
    'supabase-init',
    get_stylesheet_directory_uri() . '/js/supabase-init.js',
    array(),
    wp_get_theme()->get('Version'),
    true // 放在footer加载，优化性能
);

// 给目标脚本添加module类型属性
add_filter('script_loader_tag', function($tag, $handle) {
    if ('supabase-init' !== $handle) return $tag;
    return str_replace('type=\'text/javascript\'', 'type=\'module\'', $tag);
}, 10, 2);

额外注意事项 #

• 确保在子主题目录下执行npm install @supabase/supabase-js，让依赖包正确安装到主题内的node_modules。
• 避免直接在functions.php里输出script标签，WordPress通过wp_enqueue_script管理脚本能有效避免依赖冲突和加载顺序问题。

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