Cannot read properties of undefined (reading 'HostPort')

[rak-phillip]

There are some scenarios that can cause Rancher Desktop to throw an uncaught error when navigating to the Containers page.

Prerequisites

This involves installing Rancher with k3d. I'm sure there are more straightforward ways to reproduce, but this is this is the scenario where I encountered the bug.

• k3d

curl -s https://raw.githubusercontent.com/k3d-io/k3d/main/install.sh | bash

Install Rancher Manager on k3d

k3d cluster create mycluster \
        -p "80:30080@agent:0" \
        -p "443:30081@agent:0" \
        -p "8902:30082@agent:0" \
        --agents 2 \
        --image rancher/k3s:v1.26.9-k3s1

helm repo add rancher-latest https://releases.rancher.com/server-charts/latest


helm install rancher rancher-latest/rancher \
        --namespace cattle-system \
        --create-namespace \
        --set ingress.enabled=true \
        --set tls=external \
        --set replicas=1

kubectl apply -f rancher.yaml

rancher.yaml

# ./rancher.yml
apiVersion: v1
kind: Service
metadata:
  labels:
    app: rancher
  name: ranchernp
  namespace: cattle-system
spec:
  ports:
  - name: http
    nodePort: 30080
    port: 8080
    protocol: TCP
    targetPort: 80
  - name: https-internal
    nodePort: 30081
    port: 6443
    protocol: TCP
    targetPort: 443
  selector:
    app: rancher
  type: NodePort

Steps to reproduce

1. Install Rancher on k3d (detailed in prerequisites)
2. Navigate to Containers Page

Expected behavior

The list of containers is rendered as normal.

Actual behavior

An error is displayed and the list of containers is not rendered.

TypeError: Cannot read properties of undefined (reading 'HostPort')
    at eval (Containers.vue?7520:306:1)
    at Array.forEach (<anonymous>)
    at VueComponent.getUniquePorts (Containers.vue?7520:298:1)
    at fn (Containers.vue?d958:27:1)
    at normalized (vue.runtime.esm.js?c320:2404:1)
    at Proxy.renderSlot (vue.runtime.esm.js?c320:2082:1)
    at eval (index.vue?5106:545:1)
    at Proxy.renderList (vue.runtime.esm.js?c320:2031:1)
    at _vm._t.fullColspan (index.vue?5106:540:1)
    at Proxy.renderSlot (vue.runtime.esm.js?c320:2088:1)

Screenshots