My target is to use PixiJS UI (version 2.1.2) to place an input field at a canvas that is drawn by PixiJS (version 8.2.0).
The part with just PixiJS works fine, but I don’t get the import for @pixi/ui to run.
The Firefox says this: “Uncaught SyntaxError: ambiguous indirect export: Signal”
and the Chromium says this: SyntaxError: The requested module 'typed-signals' does not provide an export named 'Signal' (at pixi-ui.mjs:9:209) with this line highlighted: import {Signal as v} from "typed-signals";.
For the library “typed-signals” (version 2.5.0) there is only a file index.js and index.d.ts, but no index.mjs with explicit export statements.
As far as I understand the import/export topic in JavaScript, a workaround could be to write an index.mjs with re-export statements on my own. But I guess that it’s not the intended way of getting this to work.
This is my JavaScript code:
import { Application as Application, Text as Text } from 'pixi.js';
import { Button as Button } 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 a button
const button = new Button();
button.onPress.connect(() => console.log('Button pressed!') );
// [...] Do some other stuff
})();
And this is my HTML code 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",
"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>
The JavaScript libraries I got via npm install [library name].
It seems that @pixi/ui brings its own “typed-signals” (within a subfolder) so that “typed-signals” is not in the latest version 3.0.0 but in version 2.5.0. My importmap regards this.
Any idea how I can get the import/export between PixiJS UI and typed-signals set up (… and thereby PixiJS UI to run)?