Getting this error, please help: "Minified React error #31"

Universal Dashboard
1

I’m getting an error when I click a ‘Submit’ button on a form. I’m trying to populate a table with data. I’m at a loss, if anyone has insight please let me know:

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=TypeError%3A%20Cannot%20read%20property%20’forEach’%20of%20null&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

in p
in ForwardRef
in ForwardRef
in div
in ForwardRef
in ForwardRef
in div
in ForwardRef
in ForwardRef
in ForwardRef
in ForwardRef
in u
in Dashboard
in t
in div
in t
in t
in n

This PowerShell code executes perfectly fine on the same server within ISE:

$Data = @()
$scanData = (invoke-nmap localhost -preset QuickPlus)
foreach($hostEntry in ($scanData | select *)){
    foreach($portEntry in $hostEntry.ports){
        $Data += @{Hostname = $hostEntry.Hostname; OS = $hostEntry.OS; IPv4 = $hostEntry.IPv4; Protocol = $portEntry.Protocol; Port = $portEntry.Port; Services = $portEntry.Services}
    }
}

Here’s how I have it laid out in PS UD:

$Pages += New-UDPage -Name “Port Testing” -Content {
New-UDContainer {
New-UDForm -Content {
New-UDTextbox -Label ‘Standard’ -Placeholder ‘Textbox’
} -OnSubmit {
Show-UDToast -message $Session:scanData.Hostname
$Data = @()
$scanData = (invoke-nmap localhost -preset QuickPlus)
$scanData = $scanData | select *
foreach($hostEntry in $scanData{
foreach($portEntry in $hostEntry.ports){
$Data += @{Hostname = $hostEntry.Hostname; OS = $hostEntry.OS; IPv4 = $hostEntry.IPv4; Protocol = $portEntry.Protocol; Port = $portEntry.Port; Services = $portEntry.Services}
}
}
Sync-UDElement -iD ‘results’
}
New-UDContainer {
New-UDDynamic -autoRefresh -Id ‘progress’ -Content {
New-UDProgress -PercentComplete 0 -circular
}
}
New-UDDynamic -AutoRefresh -Id ‘results’ -Content {
New-UDTable -Title “Files” -Data $Session:Data

2

I’d suggest trying to convert the data into strings. One of those properties may be an object that is throwing the serializer and render for a loop.

 $Data += @{Hostname = [string]$hostEntry.Hostname; OS =  [string]$hostEntry.OS; IPv4 =  [string]$hostEntry.IPv4; Protocol =  [string]$portEntry.Protocol; Port =  [string]$portEntry.Port; Services =  [string]$portEntry.Services}
3

I tried casting those variables as strings but still was getting the error. I went as far as to comment out that entire section. The error suggests it’s unhappy with a ForEach loop somewhere. At this point I’m simply trying to update the Table when I click Submit on the form.

$Pages += New-UDPage -Name "Port Testing"  -Content {
    New-UDContainer {
        New-UDForm -Content {
            New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
        } -OnSubmit {
            Show-UDToast -message $Session:scanData.Hostname
            $Data = @()
            #$scanData = (invoke-nmap localhost -preset QuickPlus)
            #$scanData = ($scanData | select *)
            #foreach($hostEntry in $scanData){
                #foreach($portEntry in ($hostEntry.ports)){
                    #$hn = $hostEntry.Hostname.toString()
                    $hn = "test"
                    #$os = $hostEntry.OS.toString()
                    $os - "test"
                    #$ip = $hostEntry.IPv4.toString()
                    $ip = "test"
                    #$proto = $portEntry.Protocol.toString()
                    $proto = "test"
                    #$port = $portEntry.Port.toString()
                    $port = "test"
                    #$services = $portEntry.Services.ToString()
                    $services = "test"
                $Data += @{Hostname = $hn; OS = $os; IPv4 = $ip; Protocol = $proto; Port = $port; Services = $services}
                #}
            #}
            Sync-UDElement -iD 'results'
        }
        New-UDContainer {
            New-UDDynamic -autoRefresh -Id 'progress' -Content {
                New-UDProgress -PercentComplete 0 -circular
            }
        }
        New-UDDynamic -AutoRefresh -Id 'results' -Content {
            New-UDTable -Title "Files" -Data $Session:Data 
        }
    }
}
4

Can you do a $Session:Data | ConvertTo-Json | Out-File .\temp.txt to see what’s in that session variable?

5

I just had another attempt to convert my 2.9.0 dash onto the latest 2.9.8 framework in PowershellUniversal and I’m also hitting this error on a couple of my pages/components, I wondered if you got to the bottom of the minified react error #31 or if the solution is relevant to my issue…

Specifically I have this code which works without issue on 2.9.0:

New-UDElement -Id "OwnersMembersReview_checkalldiv" -Tag div -Attributes @{"style" = @{width = "100%";'text-align' = "center"}} -Endpoint {

    new-udhtml -markup "Test Text"

}

New-UDButton -Text "TEST" -OnClick {

    Set-UDElement -Id "OwnersMembersReview_checkalldiv" -content {

        new-udbutton -id "OwnersMembersReview_modal_ConfirmAll" -Text "Confirm All" -Icon check_double -Disabled

    }

}

I’m setting up an empty ‘container’ div on my page, in the example above, I’m using a button to ‘set’ the contents to something else entirely.

The error is:

Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20{id%2C%20floating%2C%20onClick%2C%20style%2C%20flat%2C%20type%2C%20iconAlignment%2C%20disabled%2C%20isPlugin%2C%20backgroundColor%2C%20icon%2C%20text%2C%20fontColor}&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

@adam is this known behaviour between 2.9.0 & 2.9.8 ? Are you aware of any workarounds?

6

I can reproduce this. Does this workaround work for you?

New-UDDashboard -Title "Hello, World!" -Content {
    New-UDElement -Tag 'div' -Id 'nice' -Content {
        "White"
    }

    New-UDButton -Text 'test' -OnClick {
        Clear-UDElement -Id 'nice'
        Add-UDElement -ParentId 'nice' -Content {
            New-UDButton -Text 'Yes' -OnClick { Show-UDToast -Message 'test' }
        }
    }
}
7

I was also able to work around it like this.

New-UDDashboard -Title "Hello, World!" -Content {
    New-UDElement -Tag 'div' -Id 'nice' -Content {
        "White"
    }

    New-UDButton -Text 'test' -OnClick {
        Set-UDElement -Id 'nice' -Content {
            @((New-UDButton -Text 'Yes' -OnClick { Show-UDToast -Message 'test' }),'')
        }
    }
}

The problem is Set-UDElement’s JavaScript implementation for New-UDElement is expecting an array but receiving a single item. If you force it to an array, it should work.

8

Gotacha! Thanks for this. I’ll give it a try tomorrow afternoon and let you know how I get on but this should hopefully do the trick :+1:

9

Just tried the first method and this is all working now, thank you!!

1 Like