How to install peer dependencies in ipyreact?

[kolibril13]

For jupyter-tldraw, I am currently using the old version 1 of tldraw, but now there is a new version 2.

The docs say I should install like this:
npm install @tldraw/tldraw@alpha signia signia-react
because tldraw v2 has peer dependencies on signia and signia-react.

I tried
import { Tldraw } from "@tldraw/tldraw@alpha";
but that did not work.

I got this error message in the console:

Multiple versions of signia detected. This will cause unexpected behavior.   
Please add "resolutions" (yarn/pnpm) or "overrides" (npm) in your package.json to ensure only one version of signia is loaded.
(anonymous) @ index.ts:11

Does someone have an idea how I can get the signia and signia-react dependencies installed?

Here is the full example

%%react

import * as React from "react";
import {  } from "@tldraw/signia";

import { Tldraw } from "@tldraw/tldraw@alpha";



export default function App() {
  return (
    <div
      style={{
        position: "relative",
        width: "800px",
        height: "350px",
      }}
    >
      <Tldraw />
    </div>
  );
}

[maartenbreddels]

The idea of ipyreact and (anywidget) is that you don't need to use npm/webpack (although you could generate a esm bundle probably).

However, it's weird it does not work... I'm not sure the peer dependency matters for esm.

[kolibril13]

Thanks for these insights!

Three questions that might help in resolving this issue:
At what location is ipyreact storing the packages?
Are there maybe cached versions of that package somewhere on my system? If yes, how can I delete them ?
Is there an equivalent of npm install in ipyreact?

[maartenbreddels]

It's getting them from esm.sh (watch your browser network tab to see them being downloaded on the fly)
This is not ipyreact, it's ES modules (esm) feature of browsers.

[kolibril13]

In the browser network tab I can indeed see an error when I try to import the new version:
import { Tldraw } from "@tldraw/tldraw@alpha".

[maartenbreddels]

yeah, saw that as well, but that is probably not related, although seems like some kind of packaging issue in tldraw.

[gergomiklos]

Maybe it is not a solution, but you can check this out on https://esm.sh/#docs which can be used with _import_map as well:

Specify Dependencies
By default, esm.sh rewrites import specifiers based on the package dependencies. To specify the version of these dependencies, you can add the ?deps=PACKAGE@VERSION query. To specify multiple dependencies, separate them with a comma, like this: [email protected],[email protected].

import React from "https://esm.sh/[email protected]"
import useSWR from "https://esm.sh/[email protected]"

[maartenbreddels]

Note that React is already 'baked' in, because we need to run react. It's currently shipping with 18 only.

[kolibril13]

@gergomiklos : Thanks a lot for pointing me to the docs!

I also just discovered that they have a code playground at https://code.esm.sh/, that's great to reproduce errors!
One question in that regard: When I get an example to work in that online playground, will it also likely work in ipyreact then?

Regarding tldraw, this example works fine:

import * as React from "https://esm.sh/react";
import { Tldraw } from "https://esm.sh/@tldraw/tldraw";

export default function App() {
  return (
    <div
      style={{
        position: "relative",
        width: "600px",
        height: "350px",
      }}
    >
      <Tldraw />
    </div>
  );
}

when I now try to change to the alpha version by changing the line

- import { Tldraw } from "https://esm.sh/@tldraw/tldraw";
+ import { Tldraw } from "https://esm.sh/@tldraw/tldraw?deps=@tldraw/tldraw@alpha";

I still get the old version rendered, and not the latest alpha application.
In case that you have other ideas on what else I can try, let me know :)

[kolibril13]

I've talked to the tldraw creator, and he told me that import { Tldraw } from "@tldraw/tldraw@alpha";
should work fine, I only would only have to provide the fonts and icons assets as folders.

This leads me to the next question:
How can I access files from the Jupyter localhost address?
For testing, I've created a file my_file.txt in the project directory and started jupyterlab, but when I tried to access it via
http://localhost:8889/my_file.txt
I got the error:

404 : Not Found
You are requesting a page that does not exist!

It would be amazing if this was possible! :)