TypeError: Cannot convert undefined or null to object

General
1

Hello,

I have an issue with a property called “Card,” which is an array that can contain two types. The first type is an array of strings, and I have no issues with it. However, when I try to use the other type, which is an object, I encounter an error (see below). The problem seems to come from patternProperties, but I don’t know how to fix it.

Thank you in advance.

JSONForms core version: 3.4.1
JSONForms vue-vuetify: 3.4.1

Error:

AdditionalProperties.vue:188 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at ComputedRefImpl.fn (AdditionalProperties.vue:188:14)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at setup (AdditionalProperties.vue:250:22)
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7907:25)
    at setupComponent (runtime-core.esm-bundler.js:7868:36)
    at mountComponent (runtime-core.esm-bundler.js:5216:7)
    at processComponent (runtime-core.esm-bundler.js:5182:9)

My schema:

const schema = {
  title: "Layout",
  type: "object",
  properties: {
    condensed: {
      type: "boolean",
    },
    hideWorkcenter: {
      type: "boolean",
    },
    card: {
      type: "array",
      items: {
        oneOf: [
          { type: "array", items: { type: "string" } },
          {
            type: "object",
            properties: {
              attributes: { type: "array", items: { type: "string" } },
              style: {
                type: "object",
                properties: {},
                patternProperties: {
                  "^.*$": { type: "string" },
                },
              },
            },
          },
        ],
      },
    },
    popper: {
      type: "array",
      items: {
        type: "object",
        properties: {
          title: {
            type: "string",
          },
          attributes: {
            type: "array",
            items: {
              type: "object",
              properties: {
                label: {
                  type: "string",
                },
                attribute: {
                  type: "string",
                },
              },
            },
          },
        },
      },
    },
    variables: {
      title: "Variables",
      type: "object",
      properties: {
        "--card-min-width": {
          type: "string",
          default: "none",
        },
        "--card-max-width": {
          type: "string",
          default: "none",
        },
        "--bucket-min-width": {
          type: "string",
          default: "140px",
        },
        "--bucket-max-width": {
          type: "string",
          default: "none",
        },
        "--operation-pin-font-size": {
          type: "string",
          default: "9px",
        },
        "--card-grid-template-areas": {
          type: "string",
          default: "'header header' 'info image' 'footer footer'",
        },
      },
    },
  },
};
2

Hi @MakaciM,

Thanks for the report. The issue is that we do not check whether the object with the patternProperties exists before accessing it. See here. This is why you run into the TypeError: Cannot convert undefined or null to object error.

This should be fixed in our renderers. Feel free to open an issue against the main repository and contributing a fix.

To workaround the issue you can add an empty default value to the attributes object to make sure it always exists, i.e. the following schema should work for you.

{
  "title": "Layout",
  "type": "object",
  "properties": {
    "condensed": {
      "type": "boolean"
    },
    "hideWorkcenter": {
      "type": "boolean"
    },
    "card": {
      "type": "array",
      "items": {
        "oneOf": [
          {
            "type": "array",
            "items": {
              "type": "string"
            }
          },
          {
            "type": "object",
            "properties": {
              "attributes": {
                "type": "array",
                "items": {
                  "type": "string"
                }
              },
              "style": {
                "type": "object",
                "default": {},
                "properties": {},
                "patternProperties": {
                  "^.*$": {
                    "type": "string"
                  }
                }
              }
            }
          }
        ]
      }
    },
    "popper": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "title": {
            "type": "string"
          },
          "attributes": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "label": {
                  "type": "string"
                },
                "attribute": {
                  "type": "string"
                }
              }
            }
          }
        }
      }
    },
    "variables": {
      "title": "Variables",
      "type": "object",
      "properties": {
        "--card-min-width": {
          "type": "string",
          "default": "none"
        },
        "--card-max-width": {
          "type": "string",
          "default": "none"
        },
        "--bucket-min-width": {
          "type": "string",
          "default": "140px"
        },
        "--bucket-max-width": {
          "type": "string",
          "default": "none"
        },
        "--operation-pin-font-size": {
          "type": "string",
          "default": "9px"
        },
        "--card-grid-template-areas": {
          "type": "string",
          "default": "'header header' 'info image' 'footer footer'"
        }
      }
    }
  }
}
1 Like
3

Thanks a lot, it works now.