Google Web Designer自定义元素报错：export异常与require未定义

你遇到的Uncaught SyntaxError: Unexpected token 'export'和Uncaught ReferenceError: require is not defined两个错误，本质是浏览器原生不支持Node.js的CommonJS模块语法。Babel默认编译后保留了exports/require这类服务端模块语法，而GWD的浏览器预览环境无法识别这些代码。

两种解决办法： #

方法1：调整Babel Repl的编译配置（推荐，从根源解决）

• 打开Babel Repl后，点击左侧齿轮图标进入设置
• 确保已启用@babel/preset-env预设
• 找到Module Format选项，将默认的CommonJS改为IIFE（立即执行函数，适配浏览器全局环境）或UMD
• 重新编译你的原始Web Components代码，此时输出会自动去掉exports和require相关语法

方法2：手动修改已编译的代码

如果不想重新编译，可以直接修改现有文件：

1. 修改main.js：

   • 删除以下代码块：

     Object.defineProperty(exports, "__esModule", {
       value: true,
     });
     exports["default"] = void 0;
     

     和末尾的：

     var _default = PetCard;
     exports["default"] = _default;
     

   • 在文件末尾添加全局暴露代码：

     window.PetCard = PetCard;
     

2. 修改index.js：

   • 删除所有现有代码，替换为：

     window.customElements.define("pet-card", window.PetCard);
     

或者更简单的方式，直接把index.js的代码合并到main.js末尾，去掉模块引用逻辑，最终main.js末尾只保留：

window.customElements.define("pet-card", PetCard);

修改完成后，重新打包组件并导入GWD，预览时浏览器就能正确识别自定义元素了。

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