Cannot infer key and value of [object Object]

[nozzlegear]

Description

Hello, I'm having some problems writing bindings for a small React component. I have a typical union type with cases that represent props for the component. One of those cases looks like Tabs of ITab list. When I try to turn a list of these props into an object with keyValueList it works fine, until I add the Tabs prop, where the JavaScript will then throw an error saying Cannot infer key and value of [object Object].

Repro code

open Fable.Core
open Fable.Core.JsInterop

type ITab = 
  { Name: string
    Selected: bool }

type Props = 
    | Tabs of ITab list
    | Title of string
  
let tab = { Name = "Hello"; Selected = true }
let works = keyValueList CaseRules.LowerFirst [Title "My Title"]
let doesNotWork = keyValueList CaseRules.None [Tabs [tab]; Title "My Title"]

Expected and actual results

I'd expect the doesNotWork value to not throw an error and generate an object that looks like:

var doesNotWork = {
  title: "My Title",
  tabs: [
    { 
      name: "Hello",
      selected: true
    }
  ]
}

Related information

• Fable version (dotnet fable --version): 1.3.0
• Operating system: Windows 10 Pro

[MangelMaxime]

You cna fix your problem by using an array:

open Fable.Core
open Fable.Core.JsInterop

type ITab = 
  { Name: string
    Selected: bool }

type Props = 
    | Tabs of ITab array
    | Title of string
  
let tab = { Name = "Hello"; Selected = true }
let works = keyValueList CaseRules.LowerFirst [Title "My Title"]
let doesNotWork = keyValueList CaseRules.None [Tabs [| tab |]; Title "My Title"]

Problem occur because Json/JObject don't use list type which is an object on runtime. Json/Jobject only know arrays.

[nozzlegear]

Thank you! I wasn't aware of that limitation, everything's working now after switching over to array.

[alfonsogarciacaro]

Yes, actually if you use a list keyValueList will interpret that's a nested keyValueList, as in the case of Style:

div [ClassName "foo"
     Style [BackgroundColor "red"
            Width "500px"]] []