PixiJS Canvas添加输入框遇@pixi/ui与typed-signals导入错误求助

问题说明 #

我要在PixiJS 8.2.0绘制的画布上，用PixiJS UI 2.1.2添加输入框。单独使用PixiJS的代码运行正常，但导入@pixi/ui时出现错误：

• Firefox提示：Uncaught SyntaxError: ambiguous indirect export: Signal
• Chromium提示：SyntaxError: The requested module 'typed-signals' does not provide an export named 'Signal'

报错行是import {Signal as v} from "typed-signals";。当前使用的typed-signals是2.5.0版本（@pixi/ui自带的依赖，不是最新的3.0.0），该版本只有index.js和index.d.ts文件，没有带显式导出的index.mjs。我知道可以自行编写index.mjs重导出，但这应该不是预期的解决方式。

相关代码 #

JavaScript代码 #

import { Application as Application, Text as Text } from 'pixi.js';
import { Input as Input } from '@pixi/ui';

(async () => {
// 绘制绿色画布
const app = new Application();
await app.init({ width: 300, height: 300, backgroundColor: 0x00ff00 })
document.body.appendChild(app.canvas);

// 创建输入框
const input = new Input({/* 配置选项 */});
// [...] 放置输入框及其他操作
})();

HTML Importmap代码 #

<!doctype html>
<html>
<head>
<script type="importmap">
{"imports": {
    "pixi.js": "http://127.0.0.1:8080/public/node_modules/pixi.js/dist/pixi.mjs",
    "eventemitter3": "http://127.0.0.1:8080/public/node_modules/eventemitter3/dist/eventemitter3.esm.js",
    "earcut": "http://127.0.0.1:8080/public/node_modules/earcut/dist/earcut.min.js",
    "@pixi/colord": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/index.mjs",
    "@pixi/colord/plugins/names": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/plugins/names.mjs",
    "@xmldom/xmldom": "http://127.0.0.1:8080/public/node_modules/@xmldom/xmldom/lib/index.js",
    "parse-svg-path": "http://127.0.0.1:8080/public/node_modules/parse-svg-path/index.js",
    "ismobilejs": "http://127.0.0.1:8080/public/node_modules/ismobilejs/esm/index.js",
    "tweedle.js": "http://127.0.0.1:8080/public/node_modules/tweedle.js/dist/tweedle.es.js",
    "typed-signals": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/node_modules/typed-signals/dist/index.js",
    "@pixi/ui": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/dist/pixi-ui.mjs"
}}
</script>
</head>
<body>
<script src="myCanvasApp.js" type="module"></script>
</body>
</html>

解决方案 #

问题根源是typed-signals 2.5.0提供的是CommonJS模块，而@pixi/ui是ES模块，浏览器原生ES模块加载器无法正确解析CommonJS的导出。以下是几种可行的解决方式：

1. 为typed-signals指定兼容的ES模块入口 #

检查@pixi/ui/node_modules/typed-signals/dist目录，如果存在index.mjs文件，直接修改importmap中的对应条目：

"typed-signals": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/node_modules/typed-signals/dist/index.mjs"

如果该文件不存在，可以用esbuild将typed-signals的CommonJS代码转译为ES模块：

esbuild node_modules/@pixi/ui/node_modules/typed-signals/dist/index.js --format=esm --outfile=node_modules/@pixi/ui/node_modules/typed-signals/dist/index.mjs

生成后再更新importmap路径即可。

2. 使用开发服务器自动处理模块兼容性 #

改用Vite、Webpack等开发服务器启动项目，这些工具会自动处理CommonJS与ES模块的兼容问题，无需手动配置importmap。比如用Vite的话，只需初始化项目并将代码放入指定目录，启动后即可正常运行。

3. 调整依赖版本 #

• 尝试升级@pixi/ui到最新稳定版，新版本可能依赖支持ES模块的typed-signals版本；
• 或者验证typed-signals 3.0.0版本与@pixi/ui 2.1.2的兼容性，3.0.0版本提供了完整的ES模块支持，若兼容可直接升级。

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