Element "has a self cycle"

I’m trying to write a React app that acts like a tree, where one React element has children that are the same type of React element, nested arbitrarily deep. When I try to compile it, it says this:

FAILED: TreeElement has a self cycle

What should I do about this?

I worked around it by using:
React.createElement(make, makeProps(…))

But now it’s warning me
unused rec flag.

It’s definitely not unused, and removing it breaks compilation.

Hi @nickretallack do you have some example code you can share that shows the problem?

1 Like

@nickretallack Usually i create a normal recursive function rather than a component (module) if i want to create a recursive component. You can check an example here. I hope this is what you are looking for.

This tree operations demo is created using this idea. Github repo is here.

1 Like

Looks like the “unused rec flag” warning is a known issue: Recursive @react.component wrongly warn about unused rec flag · Issue #4511 · rescript-lang/rescript-compiler · GitHub

My recursive element is here: nameless-language/ExecutionScopeTree.res at master · nickretallack/nameless-language · GitHub

I had to use React.createElement because I can’t just reference the module’s name inside itself by default it seems. It would be nice if i could though, because the React.createElement syntax is much more verbose than a JSX element would have been in this case.

You can definitely reference a module’s name inside itself, it just has to be a syntactic module, not a file:

module rec Button: {
  @react.component
  let make: (~count: int) => React.element
} = {
  @react.component
  let make = (~count) => {
    let (times, btn) = switch count {
    | 0 => ("0 times", <Button count=1 />)
    | _ => ("n times", React.null)
    }

    <button>
      {React.string("Click me ")}
      {React.string(times)}
      btn
    </button>
  }
}

(I realize the example is nonsensical, it’s just to show the idea.)

5 Likes