Produce helpful error messages when default data doesn't match the schema

[abhishek-compro]

Sample schema which works on https://bhch.github.io/react-json-form/playground/#8-recursion but doesn't work when using django-jsonform:

{
  "$defs": {
    "and": {
      "type": "object",
      "keys": {
        "and": {
          "type": "array",
          "items": {
            "oneOf": [
              {
                "$ref": "#/$defs/and",
                "title": "and"
              },
              {
                "$ref": "#/$defs/or",
                "title": "or"
              }
            ]
          }
        }
      }
    },
    "or": {
      "type": "object",
      "keys": {
        "or": {
          "type": "array",
          "items": {
            "oneOf": [
              {
                "$ref": "#/$defs/and",
                "title": "and"
              },
              {
                "$ref": "#/$defs/or",
                "title": "or"
              }
            ]
          }
        }
      }
    }
  },
  "oneOf": [
    {
      "$ref": "#/$defs/or",
      "title": "or"
    }
  ]
}

[bhch]

Which version are you on? Check using:

$ python -c "import django_jsonform; print(django_jsonform.__version__)"

[abhishek-compro]

Which version are you on?

2.17.0

[bhch]

So I did some tests. Seems to work as expected.

Here's an animated GIF:

---

What issues are you getting?

[abhishek-compro]

I was getting the following error:

TypeError: t is undefined
    Re http://localhost:8000/static/django_jsonform/react-json-form.js:1
    g http://localhost:8000/static/django_jsonform/react-json-form.js:1
    _e http://localhost:8000/static/django_jsonform/react-json-form.js:1
    render http://localhost:8000/static/django_jsonform/react-json-form.js:1
    React 13
    render http://localhost:8000/static/django_jsonform/react-json-form.js:1
    initJSONForm http://localhost:8000/static/django_jsonform/index.js:62
    initializeAllForNode http://localhost:8000/static/django_jsonform/index.js:100
    init http://localhost:8000/static/django_jsonform/index.js:105
    <anonymous> http://localhost:8000/static/django_jsonform/index.js:145
    EventListener.handleEvent* http://localhost:8000/static/django_jsonform/index.js:144
    <anonymous> http://localhost:8000/static/django_jsonform/index.js:149
react-dom.production.min.js:141:274

What should I do?

Edit: Got this in Firefox

[bhch]

Try disabling your browser cache.

If this is a production environment, you must also run the collectstatic command to replace old static files with new ones.

[abhishek-compro]

Got this in chrome:

react-dom.production.min.js:141 TypeError: Cannot read properties of undefined (reading 'length')
    at Re (react-json-form.js:1:52698)
    at g (react-json-form.js:1:56760)
    at _e (react-json-form.js:1:57098)
    at a.render (react-json-form.js:1:59517)
    at Te (react-dom.production.min.js:119:308)
    at Ch (react-dom.production.min.js:119:105)
    at Pj (react-dom.production.min.js:233:139)
    at di (react-dom.production.min.js:168:305)
    at Nj (react-dom.production.min.js:168:236)
    at sc (react-dom.production.min.js:168:96)

Try disabling your browser cache.

I did clear the browser cache and reinstalled all the packages in a fresh project and got the same error. How do I disable the cache though?

Its development environment.

To be more precise I am using the following model:

class UserFilter(models.Model):
    filters = JSONField(
        schema={
            "$defs": {
                "and": {
                    "type": "object",
                    "properties": {
                        "and": {
                            "type": "array",
                            "items": {
                                "oneOf": [
                                    {"$ref": "#/$defs/and", "title": "and"},
                                    {"$ref": "#/$defs/or", "title": "or"},
                                ]
                            },
                        }
                    },
                },
                "or": {
                    "type": "object",
                    "properties": {
                        "or": {
                            "type": "array",
                            "items": {
                                "oneOf": [
                                    {"$ref": "#/$defs/and", "title": "and"},
                                    {"$ref": "#/$defs/or", "title": "or"},
                                ]
                            },
                        }
                    },
                },
            },
            "oneOf": [
                {"$ref": "#/$defs/and", "title": "and"},
                {"$ref": "#/$defs/or", "title": "or"},
            ],
        },
        default=dict,
    )
    name = models.CharField(max_length=512, unique=True)

What are you using?

[bhch]

default=dict is what's causing the problem.

The widget is receiving {} as the default data which doesn't match any subschemas listed under oneOf.

To fix it, you should:

• either stop providing a default value. The widget will automatically create appropriate empty data, so I don't think you should worry about it.
• or if you must, then the default value must match at least one of the subschemas, e.g.: default={"and": []}.

---

Anyway, I'll mark this issue as a bug because the widget should handle this type of cases more gracefully and should produce helpful error messages.

[abhishek-compro]

That worked. Thanks!!

[sgocg]

I'm running into a similar issue (at least the stacktrace is the same as mentioned in #101 (comment)) when adding a new array field to the schema.

A minimal version of my schema looks as follows:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
  }
}

If I update the schema to the following value:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "tags": {
      "type": "array",
      "items": {"type": "string"}
    }
  }
}

... for existing values in the database (eg. {"name": "Example"}) the admin widget doesn't render and shows this message instead: (!) TypeError: Cannot read properties of undefined (reading 'length').

Interestingly, this only happens if the type of tags is array. If set the type to something else (eg. string), the admin widget renders fine and it's also possible to update the tags value using the widget. I tried providing a default value in the schema but unfortunately it didn't help.

[bhch]

@sgocg Hi, I just tested the scenario you mentioned. It's working completely fine for me. I tested with the latest version (2.21.0).

Which version are you using?

[sgocg]

Thanks for testing it out. And apologies that the previous schema wasn't fully representative. I tried pasting a (much too) simplified version of the schema as my original schema is quite large.

In any case, I was able to simplify it differently now. Here's the original schema:

{
  "type": "object",
  "properties": {
    "data": {
      "type": "object",
      "title": "Example",
      "oneOf": [
        {
          "title": "Table",
          "properties": {
            "type": {
              "type": "string",
              "default": "table",
              "widget": "hidden"
            },
            "columns": {
              "title": "Columns",
              "type": "array",
              "items": {
                "type": "object",
                "properties": {
                  "title": {
                    "type": "string",
                    "title": "Header"
                  },
                  "type": {
                    "type": "string",
                    "title": "Type",
                    "choices": [
                      "string",
                      "number",
                      "integer",
                      "boolean"
                    ],
                    "default": "string",
                    "required": true
                  },
                  "default": {
                    "type": "array",
                    "title": "Prepopulate rows (EN)",
                    "items": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          }
        }
      ]
    }
  }
}

If I update the schema to this:

{
  "type": "object",
  "properties": {
    "data": {
      "type": "object",
      "title": "Example",
      "oneOf": [
        {
          "title": "Table",
          "properties": {
            "type": {
              "type": "string",
              "default": "table",
              "widget": "hidden"
            },
            "columns": {
              "title": "Columns",
              "type": "array",
              "items": {
                "type": "object",
                "properties": {
                  "title": {
                    "type": "string",
                    "title": "Header"
                  },
                  "type": {
                    "type": "string",
                    "title": "Type",
                    "choices": [
                      "string",
                      "number",
                      "integer",
                      "boolean"
                    ],
                    "default": "string",
                    "required": true
                  },
                  "default": {
                    "type": "array",
                    "title": "Prepopulate rows (EN)",
                    "items": {
                      "type": "string"
                    }
                  },
                  "default_de": {
                    "type": "array",
                    "title": "Prepopulate rows (DE)",
                    "items": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          }
        }
      ]
    }
  }
}

... i.e. add the default_de property, the admin widget doesn't render with the following message:

In the database I'm using the following value:

{
  "data": {
    "type": "table",
    "columns": [
      {
        "type": "string",
        "title": "Column 1",
        "default": [
          "first",
          "second",
          "third"
        ]
      },
      {
        "type": "number",
        "title": "Column 2",
        "default": []
      },
      {
        "type": "string",
        "title": "Column 3",
        "default": []
      }
    ]
  }
}

I was using 2.17.0 earlier but upgraded to 2.21.0 but the problem still persists.

[bhch]

@sgocg I am able to reproduce the error now. It's a separate issue altogether. Will be tracked in #131.