Loading error: "Unable to resolve specifier"

[kolibril13]

Some react components work out of the box, e.g. https://mui.com/material-ui/react-rating/, some others dont.

works

%%react
import * as React from 'react';
import Box from '@mui/material/Box';
import Rating from '@mui/material/Rating';
import Typography from '@mui/material/Typography';

export default function BasicRating() {
  const [value, setValue] = React.useState<number | null>(2);

  return (
    <Box
      sx={{
        '& > legend': { mt: 2 },
      }}
    >
      <Typography component="legend">Controlled</Typography>
      <Rating
        name="simple-controlled"
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
      />
      <Typography component="legend">Read only</Typography>
      <Rating name="read-only" value={value} readOnly />
      <Typography component="legend">Disabled</Typography>
      <Rating name="disabled" value={value} disabled />
      <Typography component="legend">No rating given</Typography>
      <Rating name="no-value" value={null} />
    </Box>
  );
}

Does not work

I went to a tldraw react code sandbox, https://codesandbox.io/s/n539u?file=/src/App.tsx copied the code and pasted it into a notebook, but now I get an "Unable to resolve specifier" error :

tldraw does not work

%%react
import * as React from "react";
import { Tldraw, TldrawApp } from "@tldraw/tldraw";
import "./styles.css";

export default function App() {
  const persistenceId = "tldraw-example";

  const handleMount = (app: TldrawApp) => {
    // You can use the app API here! e.g. app.selectAll()
  };

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh"
      }}
    >
      <Tldraw id={persistenceId} onMount={handleMount} />
    </div>
  );
}

Unable to resolve specifier '@tldraw/tldraw' imported from blob:http://localhost:8888/426cf323- ...

mafs.dev does not work

from https://mafs.dev/guides/get-started/installation .

%%react
import { Mafs, Coordinates } from "mafs"

function HelloFx() {
  return (
    <Mafs>
      <Coordinates.Cartesian />
    </Mafs>
  )
}

Unable to resolve specifier 'mafs' imported from blob:http://localhost:8888/cb1f0f13-...

[maartenbreddels]

I just released version 0.2.0 which doesn't need the prefixing with https://esm.sh anymore, and some bugs are fixed.

So these examples now work out of the box (modulo the default export, see below).

For mafs you need to load some CSS:

%%html
<link rel="stylesheet" href="https://unpkg.com/mafs@0.16.0/core.css">

(This works in the notebook.)

I've put in the documentation a note about having a default export (e.g. export default function HellowFx()) https://github.com/widgetti/ipyreact#facts

For completeness, this works:
%%react
import { Mafs, Coordinates } from "mafs"

export default function HelloFx() {
  return (
    <Mafs>
      <Coordinates.Cartesian />
    </Mafs>
  )
}

[kolibril13]

This is absolutely amazing!!! and it even works in VS Code:

I did some testing, and a lot of things are working out of the box, thank you so much for these gold gems!

One thing that did not work are these draggable elements, e.g. from this example https://mafs.dev/guides/display/lines

%%react
import { Mafs, Line, Coordinates, useMovablePoint } from "mafs"

import * as React from 'react';

export default function HelloFx() {
  const point1 = useMovablePoint([-2, -1])
  const point2 = useMovablePoint([2, 1])

  return (
    <Mafs viewBox={{ x: [-2, 2], y: [-1, 1] }}>
      <Coordinates.Cartesian />
      <Line.Segment
      point1={point1.point}
      point2={point2.point}
      />
      {point1.element}
      {point2.element}
    </Mafs>
  )
}

I could pin the issue to {point1.element} and {point2.element} causing the message: Error Cannot convert undefined or null to object

[maartenbreddels]

and it even works in VS Code:

Was wondering about that!

Thank you so much for these gold gems!

❤️

I really don't know why this doesn't work. I tried to debug it, but I got nowhere, I hope you have more success by now. Note that we are using React 18, maybe that matters?

[kolibril13]

Thanks for your efforts! I will do some further investigations on this and will contribute the results. Either as documentation (hopefully) or as a bug report.

[maartenbreddels]

😍