如何为Shopify Hydrogen(Remix)补全Node模块？遇ReSVG-JS报错求助

问题背景 #

在Shopify Hydrogen项目中集成ReSVG-JS时，切换到Hydrogen专属构建脚本（npm run build:css && concurrently -g -r npm:dev:css "shopify hydrogen dev"）后，先后解决了process未定义、fs.existsSync不存在的问题，但现在碰到TypeError: globalThis.XMLHttpRequest is not a constructor的报错，常规ESBuild补全工具无效。

可行解决方案 #

1. 手动注入XMLHttpRequest Polyfill #

Hydrogen基于Edge Runtime/Worker环境，默认没有内置XMLHttpRequest，手动引入polyfill即可：

• 先安装依赖包：

npm install xmlhttprequest --save-dev
# TypeScript项目额外安装类型声明
npm install @types/xmlhttprequest --save-dev

• 在引入ReSVG的文件顶部添加以下代码：

import { XMLHttpRequest } from 'xmlhttprequest';
globalThis.XMLHttpRequest = XMLHttpRequest;

2. 通过ESBuild全局注入Polyfill #

如果手动导入不生效，可通过ESBuild配置全局注入：

• 修改remix-esbuild-override.js文件，更新ESBuild配置：

const { withEsbuildOverride } = require('remix-esbuild-override');
const polyfillNode = require('esbuild-plugin-polyfill-node');

withEsbuildOverride((option) => {
  // 保留之前的process polyfill配置
  option.plugins.push(polyfillNode({
    globals: { process: true }
  }));

  // 添加XMLHttpRequest全局注入
  option.inject = option.inject || [];
  option.inject.push(require.resolve('./xmlhttprequest-polyfill.js'));

  return option;
});

• 项目根目录创建xmlhttprequest-polyfill.js文件：

globalThis.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

3. 切换到ReSVG的Wasm版本 #

如果上述方法仍无效，建议改用ReSVG的Wasm版本，彻底规避Node.js环境依赖：

• 替换安装包：

npm uninstall @resvg/resvg-js
npm install @resvg/resvg-wasm

• 修改代码中的导入和使用逻辑：

import { Resvg } from '@resvg/resvg-wasm';

// 初始化Wasm（可提前在入口文件执行一次）
await Resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm@latest/dist/resvg.wasm'));

// 正常使用ReSVG
const svgContent = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>';
const resvgInstance = new Resvg(svgContent);
const pngBuffer = resvgInstance.render().asPng();

验证 #

完成配置后，重新启动开发服务器：

npm run build:css && concurrently -g -r npm:dev:css "shopify hydrogen dev"

检查是否仍存在XMLHttpRequest相关报错。

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