RangeError: Maximum call stack size exceeded about debugger HOT 6 CLOSED

The object you are passing is too big for stringifying it.

Same thing will probably occured if you do JSON.stringify yourClickEv

You should pass only the data you need.

When, you use a form input you pass:

OnInput (fun ev -> MyMsg ev.Value)

not:

OnInput (fun ev -> MyMsg ev)

from debugger.

@MangelMaxime Oh, I didn't know about that 😮 😅

@nojaf It's difficult to detect this kind of errors, I myself have been bitten by them several times. I think the main problem is we (by "we" I mean "I") started to use dynamic operators when dealing with React events (OnClick (fun ev -> ev.target?value |> doSomething)) which makes it easy to just write ev?value (or box in your case) and the compiler won't complain. We need to get used to write (ev.target :?> Browser.HTMLInputElement).value or use extensions like the one Maxime pointed out.

from debugger.

I have helpers like these in my project, maybe we could add them to Fable.React to prevent these situations:

let inline onValueChanged f =
    OnChange (fun ev -> (ev.target :?> Browser.HTMLInputElement).value |> f)

let inline onChecked f =
    OnChange (fun ev -> (ev.target :?> Browser.HTMLInputElement).``checked`` |> f)

from debugger.

This might actually work w/o a debugger and tracing, but as @MangelMaxime said, for showing the debug info we serialize the messages and in case of the full event object it will drag the entire browser DOM along. Closing.

from debugger.

@alfonsogarciacaro Hum for the first one we already added ev.Value for this specific case.

https://github.com/fable-compiler/fable-react/blob/master/src/Fable.React/Fable.Helpers.React.fs#L1096-L1100

from debugger.

Could we not improve the error message? If you don't know this, it's hard to figure out...

from debugger.