I am trying to utilize PixiJS UI version 2.1.2 to add an input field to a canvas rendered by PixiJS version 8.2.0.
The PixiJS part works fine, but I'm encountering issues with importing @pixi/ui. Firefox displays: "Uncaught SyntaxError: ambiguous indirect export: Signal" while Chromium shows:
SyntaxError: The requested module 'typed-signals' does not provide an export named 'Signal' (at pixi-ui.mjs:9:209)import {Signal as v} from "typed-signals";The "typed-signals" library version 2.5.0 only has index.js and index.d.ts files, lacking index.mjs with explicit export statements.
Based on my understanding of JavaScript import/export concepts, a workaround might involve creating an index.mjs file with re-export statements. However, I believe this is not the preferred approach.
This is my snippet of JavaScript code:
import { Application as Application, Text as Text } from 'pixi.js';
import { Input as Input } from '@pixi/ui';
(async () => {
// Draw a green canvas
const app = new Application();
await app.init({ width: 300, height: 300, backgroundColor: 0x00ff00 })
document.body.appendChild(app.canvas);
// Create an input field
const input = new Input({/*some options*/});
// [...] Place the input and perform other operations
})();
Here is my HTML code along with the 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",
// Other imports listed here
}}
</script>
</head>
<body>
<script src="myCanvasApp.js" type="module"></script>
</body>
</html>
I obtained the JavaScript libraries via npm install [library name].
It appears that @pixi/ui includes its own version of "typed-signals" within a subfolder, resulting in "typed-signals" being at version 2.5.0 instead of the latest 3.0.0. My importmap accommodates this.
If you have any suggestions on how to establish the import/export functionality between PixiJS UI and typed-signals (... enabling PixiJS UI to function), please share your insights.