Using ReactFlow in observable

Hello everyone,
as I was playing with mermaid, I hit its limit really quickly.

I have been using on a project react flow and I really enjoy using it. However, I am having a hard time figuring out how to integrate that in the rest of observable. I wish they had release a non-react version of this.

Did anyone already attempt this?

My main issue is trying to import this:

reactflow = require("https://unpkg.com/reactflow@11.5.6/dist/umd/index.js")

I believe that React / Jed Fox | Observable will do most of the trick of enabling react into Observable.

Thanks a lot!

Try importing via esm.sh:

reactflow = import("https://esm.sh/reactflow@11.5.6")

and maybe

render = reactflow.default.render
1 Like

works!

we should update @mbostock notebook on how to import stubborn modules!

Unfortunately, I get l.current is null in useRef, I found some previous issues reporting on this for React, but haven’t figured out how to fix that.

Anyway, leaving my debug page here: ReactFlow on Observablehq / Nicola | Observable