WordPress插件JS文件导入函数报错，如何设置type="module"？

你遇到的Uncaught SyntaxError: Unexpected token {错误，本质是浏览器把你的脚本当成了传统的非模块JS文件，不支持ES6的import语法。要解决这个问题，核心就是让浏览器识别你的脚本为ES模块，也就是给脚本标签添加type="module"属性，下面是具体的实现方法：

方法一：使用script_loader_tag过滤器（推荐） #

在你的插件PHP文件中添加以下代码，通过WordPress的过滤器来修改脚本标签：

add_filter( 'script_loader_tag', function( $tag, $handle ) {
    // 这里的'block'对应你wp_enqueue_script中的第一个参数（脚本句柄）
    if ( 'block' === $handle ) {
        // 在脚本标签中插入type="module"属性
        return str_replace( ' src', ' type="module" src', $tag );
    }
    return $tag;
}, 10, 2 );

添加这段代码后，当WordPress输出你的social-block.js脚本标签时，会自动带上type="module"属性，浏览器就能正确解析import语法了。

额外注意事项 #

• 路径正确性：确保import { facebookRender } from './icons/social/facebookRender';中的路径是正确的。如果你的social-block.js在插件根目录，那facebookRender.js应该放在插件目录/icons/social/下，建议加上.js后缀（比如./icons/social/facebookRender.js），避免部分浏览器解析路径出错。
• 全局依赖兼容：你的脚本依赖wp-blocks、wp-editor这些WordPress全局脚本，在ES模块中可以直接通过全局变量（比如wp.blocks、wp.editor）访问，无需额外导入。
• 导出语法验证：你的函数导出方式const facebookRender = function() { ... }; export { facebookRender }是完全正确的，也可以简化为export const facebookRender = function() { ... }，效果一致。

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