Shopify主题应用扩展App Block导入npm包报错，求正确实现方式

错误原因分析 #

你遇到的两个报错本质是同一个问题：Shopify主题应用扩展的App Block加载的JavaScript文件默认运行在浏览器原生环境，既不支持ES模块的import语法（除非声明文件为模块，但App Block的JS引用方式无法直接添加type="module"属性），也不支持Node.js的CommonJS模块系统（所以require未定义）。

解决方案 #

方案1：使用CDN直接引入（快速简单） #

直接在App Block的Liquid模板中添加CDN脚本标签引入moment.js，之后在你的app.js里可以直接使用全局的moment对象：

修改你的App Block模板：

<!-- 先引入moment的CDN -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>

<button id="random-button">
  random label
</button>

{% schema %}
{
    "name": "Random App Block",
    "target": "section",
    "javascript": "app.js",
    "stylesheet": "style.css",
    "settings":[]
}
{% endschema %}

然后在app.js中直接使用：

// 无需导入，直接调用全局moment对象
document.getElementById('random-button').addEventListener('click', () => {
  console.log(moment().format('YYYY-MM-DD'));
});

方案2：用打包工具构建兼容浏览器的文件（适合复杂场景） #

如果需要使用多个npm包或模块化开发，需要用打包工具（如Vite、Webpack）将代码和依赖打包成浏览器能直接运行的单文件：

1. 在你的App Block扩展目录下初始化npm项目：

npm init -y

2. 安装moment和打包工具（以Vite为例）：

npm install moment vite --save-dev

3. 创建源码目录src，并新建入口文件src/main.js，编写业务逻辑：

import moment from 'moment';

// 你的业务代码
document.getElementById('random-button').addEventListener('click', () => {
  alert(moment().format('YYYY-MM-DD HH:mm:ss'));
});

4. 在package.json中添加打包脚本，指定输出目录和文件名（要匹配schema中javascript字段的路径）：

{
  "scripts": {
    "build": "vite build --outDir ./ --entry ./src/main.js --emptyOutDir false"
  }
}

5. 执行打包命令，生成兼容浏览器的app.js：

npm run build

6. 用Shopify CLI部署扩展即可，部署前确保打包后的app.js已覆盖原文件。

注意事项 #

• 使用CDN时要指定稳定的版本号，避免依赖版本变动导致问题
• 用打包工具时，注意配置打包输出路径要和App Block schema中指定的JS文件路径一致，避免加载失败

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