Dealing with {joo_tramp, joo_args}

Learning
1

I’m posting here instead of jsoo-react as I’m guessing this might be more jsoo related than jsoo-react related. Here is my sample code:

open React.Dom.Dsl
open Html

module Js = Js_of_ocaml.Js
module Html = Js_of_ocaml.Dom_html

(* let c2 = Js.Unsafe.js_expr "window.document.getElementById('root')";; *)

let _c3: React.element = div [| |] [ React.string("Hello world! 2") ] ;;



module Consumer = struct
  let%component make ~name = 
    div [| |] [ React.string ("Hello" ^ name) ] ;;
end;;

let _c4: React.element = Consumer.make ~name:"John" ();;


let _ = Js.Unsafe.fun_call (Js.Unsafe.js_expr "console.log") 
    [| Js.Unsafe.inject _c3 ; Js.Unsafe.inject _c4 |] ;;


let _ = React.Dom.render_to_element ~id:"root" _c4 ;;

Now, in the last line, if I render _c3, everything works fine. When I try to render _c4, I get an error of:

router.bc.js:13114 Uncaught Error: Objects are not valid as a React child (found: object with keys {joo_tramp, joo_args}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (router.bc.js:13114:19)
    at reconcileChildFibers2 (router.bc.js:13744:17)
    at reconcileChildren (router.bc.js:16184:39)
    at mountIndeterminateComponent (router.bc.js:16873:15)
    at beginWork (router.bc.js:17794:24)
    at HTMLUnknownElement.callCallback2 (router.bc.js:5566:24)
    at Object.invokeGuardedCallbackDev (router.bc.js:5591:26)
    at invokeGuardedCallback (router.bc.js:5625:41)
    at beginWork$1 (router.bc.js:21653:17)
    at performUnitOfWork (router.bc.js:21089:22)

Here is the surprising thing to me: I manually tagged both _c3, _c4 as React.element, and ocamlc compiled that fine.

However, it appears that _c4 is not a React.element; but, instead, some “trampoline” (as often used for tail recursion).

Can anyone enlighten me on what {joo_tramp, joo_args} is, and how it relates to this code ?

Thanks!

2

I suspect that you’re using OCaml 5.0 and jsoo with --enable effects. In which case, it looks like an issue in jsoo-react or maybe just in gen_js_api (used by jsoo-react), see Wrap functions supplied to Ojs.iter_properties by vouillon · Pull Request #170 · LexiFi/gen_js_api · GitHub

2 Likes
3

Confirming this is true.

I have no idea how you debugged this. Thanks!

4

A new version of gen_js_api has been released (1.1.2), does it solve you issue ?

5

This is interesting. A few days ago, I ran opam pin to get the latest of gen_js_api / ojs. See: 2 packages from LexiFi/gen_js_api at 1.1.2 by nojb · Pull Request #23488 · ocaml/opam-repository · GitHub

Even with those changes, I still had the trampoline error. I “solved” the issue by disabling effects. No problems with jsoo-react since then. (Technically, there are problems, but due to my fault, and not the compiler / toolchain / … itself).

6

If the change to gen_js_api was not enough to fix the issue, You should probably open an issue on jsoo-react.