JSON Schema attribute definition: Unsupported field schema for field... : Unknown field type undefined

Question

I'm trying to build a form based on a JSON schema and using the react-jsonschema-form component for ReactJS.

I want to use this to display a form that users can fill with various settings (CSS/HTML selectors, etc) that will be used to parse playlist tracks datas on remote webpages.

I have a selector definition in my JSON schema, like this :

"definitions":{
  "selector":{
    "$id":        "#/definitions/selector",
    "type":       "object",
    "title":      "CSS or HTML selector used to extract datas.",
    "required":   [],
    "properties":{
      "path":{
        "type":     "string",
        "title":    "Selector path",
        "default":  "",
        "examples": ["#playlist .track .title"]
      },
      "multiple":{
        "type":     "boolean",
        "title":    "Should we extract multiple values?",
        "default":  false,
        "readOnly": true
      }
    }
  }
}

My JSON schema for parsing tracks look then like this:

    "track":{
      "$id": "#/properties/selectors/properties/track",
      "type": "object",
      "title": "Track selectors",
      "required": [
        "title"
      ],
      "properties":{
        "artist":{
          "$ref": "#/definitions/selector",
          "title": "Track artist"
        },
        "title":{
          "$ref": "#/definitions/selector",
          "title": "Track title"
        },
        "album":{
          "$ref": "#/definitions/selector",
          "title": "Track album"
        },
        "image":{
          "$ref": "#/definitions/selector",
          "title": "Track image"
        },
        "duration":{
          "$ref": "#/definitions/selector",
          "title": "Track duration"
        },
        "location":{
          "$ref": "#/definitions/selector",
          "title": "Track locations",
          "properties":{
            "multiple":{
              "default": true
            }
          }
        },
        "link":{
          "$ref": "#/definitions/selector",
          "title": "Track links",
          "properties":{
            "multiple":{
              "default": true
            }
          }
        }
      }
    }

As you see, the selector definition is used for the artist, title, album, image, duration, location and link attributes.

the multiple attribute of the selector definition is used to know if the parser should extract a single or multiple values.

Its readonly attribute is set to true because the user cannot choose this: I know a track has only ONE artist, title, album, image and duration, but might have several location (files) and links attached to.

"location":{
  "$ref": "#/definitions/selector",
  "title": "Track locations",
  "properties":{
    "multiple":{
      "default": true
    }
  }
},
"link":{
  "$ref": "#/definitions/selector",
  "title": "Track links",
  "properties":{
    "multiple":{
      "default": true
    }
  }
}

This is where I have a problem: When displaying those two fields, react-jsonschema-form renders those errors:

Track locations
multiple
Unsupported field schema for field root_selectors_track_location_multiple: Unknown field type undefined.

{
  "default": true
}
Track links
multiple
Unsupported field schema for field root_selectors_track_link_multiple: Unknown field type undefined.

{
  "default": true
}

I don't know if this occurs because my JSON schema is not well defined (can I "override" the properties of a definition like this ?) or if this is a bug of react-jsonschema-form.

Can someone help ?

Thanks for your long read!

Answer 1

From what I can read in the documentation, the react JSON schema forms library supports draft-07 of the JSON schema specification. In this case, any schema keyword beside $ref at this sub-schema level is simply ignored.

From https://json-schema.org/understanding-json-schema/structuring.html#ref

In Draft 4-7, $ref behaves a little differently. When an object contains a $ref property, the object is considered a reference, not a schema. Therefore, any other properties you put in that object will not be treated as JSON Schema keywords and will be ignored by the validator. $ref can only be used where a schema is expected.

You will need to change your schema to reflect this. An option could be to surround your extension with allOf:

"location": {
  "allOf": [
    { "$ref": "#/definitions/selector" },
    {
      "title": "Track locations",
      "properties": {
        "multiple":{
          "default": true
        }
      }
    }
  ]
}