OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Import/export between PixiJS UI and typed-signals

  • Thread starter Thread starter S. Doe
  • Start date Start date
S

S. Doe

Guest
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:

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:

Code:
<!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)?

<p>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).</p>
<p>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: <code>SyntaxError: The requested module 'typed-signals' does not provide an export named 'Signal' (at pixi-ui.mjs:9:209)</code> with this line highlighted: <code>import {Signal as v} from "typed-signals";</code>.</p>
<p>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.</p>
<p>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.</p>
<p>This is my JavaScript code:</p>
<pre><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
})();
</code></pre>
<p>And this is my HTML code with the importmap:</p>
<pre><code><!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>
</code></pre>
<p>The JavaScript libraries I got via <code>npm install [library name]</code>.
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.</p>
<p>Any idea how I can get the import/export between PixiJS UI and typed-signals set up (... and thereby PixiJS UI to run)?</p>
 
Top