How can I use a frontend library that uses the DOM or canvas to work with Hydrogen?

[CaptainJeff]

I'm trying to use this library PixiJs https://pixijs.com/ with my hydrogen app on the homepage but i'm getting some compilation issues. Can someone point me in the right direction? Here is the error i'm getting

MiniOxygen couldn't load your app's entry point.
Error: [o2:runtime] External modules are not supported: "url"
    at /node_modules/@pixi/utils/lib/url.mjs?v=6b076fec:1:110
    at /node_modules/@pixi/utils/lib/index.mjs?v=6b076fec:5:31

I'm guessing its caused by the fact its SSR but I can't seem to figure out how to get it work. I tried adding a .client.tsx extension an including "use client"; in the component but still can't get anything working. Any help would be appreciated

Note: This is happening on a new Hydrogen app with just pixijs rendered on the homepage. Took sample code from pixi's website

  return (
    <Stage options={{ background: 0xffffff }}>
      <Sprite
        image="https://pixijs.io/pixi-react/img/bunny.png"
        x={400}
        y={270}
        anchor={{ x: 0.5, y: 0.5 }}
      />
      <Container x={400} y={330}>
        <Text
          text="Hello World"
          anchor={{ x: 0.5, y: 0.5 }}
          filters={[blurFilter]}
        />
      </Container>
    </Stage>