Pixel
Pixelā€¢11mo ago

Pixi.js breaks Deno

I'm trying to import Pixi in a Fresh island:
import { Sprite, Stage } from "npm:@pixi/react@7.1.0";

export function Game() {
return (
<Stage>
<Sprite
image="https://pixijs.io/pixi-react/img/bunny.png"
x={400}
y={270}
anchor={{ x: 0.5, y: 0.5 }}
/>
</Stage>
);
}
import { Sprite, Stage } from "npm:@pixi/react@7.1.0";

export function Game() {
return (
<Stage>
<Sprite
image="https://pixijs.io/pixi-react/img/bunny.png"
x={400}
y={270}
anchor={{ x: 0.5, y: 0.5 }}
/>
</Stage>
);
}
This results in an error:
error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'process')
error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'process')
2 Replies
Kyiro
Kyiroā€¢11mo ago
Try importing https://esm.sh/@pixi/react@7.1.0?alias=react:preact/compat&external=preact instead also you should probably disable it from SSRing (i forgot how šŸ’€) and put it in an island if it's not already
Tucker
Tuckerā€¢9mo ago
@bamitspixel were you able to successfully get this to work in an island? I'm trying to do the same and running into the following issue:
āžœ CardGame deno task start
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 5 routes and 2 islands.
error: Uncaught (in promise) SyntaxError: The requested module '@pixi/react' does not provide an export named 'Sprite' at file:///Users/tucker/Developer/CardGame/islands/Game.tsx:1:10
const manifest = (await import(toFileUrl(join(dir, "fresh.gen.ts")).href))
^
at async dev (https://deno.land/x/fresh@1.4.3/src/dev/dev_command.ts:42:21)
at async file:///Users/tucker/Developer/CardGame/dev.ts:8:1
Watcher Process failed. Restarting on file change...
āžœ CardGame deno task start
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 5 routes and 2 islands.
error: Uncaught (in promise) SyntaxError: The requested module '@pixi/react' does not provide an export named 'Sprite' at file:///Users/tucker/Developer/CardGame/islands/Game.tsx:1:10
const manifest = (await import(toFileUrl(join(dir, "fresh.gen.ts")).href))
^
at async dev (https://deno.land/x/fresh@1.4.3/src/dev/dev_command.ts:42:21)
at async file:///Users/tucker/Developer/CardGame/dev.ts:8:1
Watcher Process failed. Restarting on file change...
I've got the following in my import map...
...
"preact": "https://esm.sh/preact@10.17.1",
"preact/": "https://esm.sh/preact@10.17.1/",
"pixi.js": "https://esm.sh/pixi.js@7.2.4",
"@pixi/react": "https://esm.sh/@pixi/react@7.1.1?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat/src/index.d.ts&external=preact&target=es2022",
...
...
"preact": "https://esm.sh/preact@10.17.1",
"preact/": "https://esm.sh/preact@10.17.1/",
"pixi.js": "https://esm.sh/pixi.js@7.2.4",
"@pixi/react": "https://esm.sh/@pixi/react@7.1.1?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat/src/index.d.ts&external=preact&target=es2022",
...