Pixel•12mo 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•12mo 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•11mo 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",
...