Uniforms: JSON Schema - Multiple Definitions Errors Out

[dacioromero]

When creating a JSONSchemaBridge of this schema it errors when inputted into AutoForm and ValidatedForm

My initial impressions is that JSONSchemaBridge isn't expecting JSON Schema in the format that I used which I believe is standard.

Apologies if my React code is a bit unconventional; I'm new.

Code and Logs

Source (omitted irrelevant parts)

import Ajv from 'ajv';
import JSONSchemaBridge from 'uniforms/JSONSchemaBridge';
import AutoForm from 'uniforms/AutoForm';


export default class extends Component {
  state = { schemaBridge: null };

  async componentDidMount() {
    const response = await fetch('https://gitcdn.xyz/repo/DacioRomero/Stands-Schemas/master/2019.json');
    const schema = await response.json();

    const validator = new Ajv({ allErrors: true, useDefaults: true }).compile(schema);

    const schemaValidator = model => {
        validator(model);

        if (validator.errors && validator.errors.length) {
            throw {details: validator.errors};
        }
    };

    const schemaBridge = new JSONSchemaBridge(schema, schemaValidator);

    this.setState({ schemaBridge });
  }

  ...

  render() {
    const { schemaBridge: schema } = this.state

    return(
    ...
    {
      schema !== null ?
      <AutoForm schema={schema} /> :
      <div />
    }
    ...
  }
}

Console logs

The above error occurred in the <AutoValidatedQuickForm> component:
  in AutoValidatedQuickForm (at ReportModal.js:70)
  in div (created by Paper)
  in Paper (created by WithStyles(Paper))
  in WithStyles(Paper) (created by Dialog)
  in div (created by Dialog)
  in Transition (created by Fade)
  in Fade (created by WithTheme(Fade))
  in WithTheme(Fade) (created by Dialog)
  in RootRef (created by Modal)
  in div (created by Modal)
  in Portal (created by Modal)
  in Modal (created by WithStyles(Modal))
  in WithStyles(Modal) (created by Dialog)
  in Dialog (created by WithStyles(Dialog))
  in WithStyles(Dialog) (at ReportModal.js:61)
  in div (at ReportModal.js:53)
  in _default (at Reports.js:49)
  in div (created by Grid)
  in Grid (created by WithStyles(Grid))
  in WithStyles(Grid) (at Reports.js:48)
  in div (created by Grid)
  in Grid (created by WithStyles(Grid))
  in WithStyles(Grid) (at Reports.js:44)
  in _default (at App.js:12)
  in div (at App.js:10)
  in App (at src/index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. index.js:1446

TypeError: can't convert undefined to object  JSONSchemaBridge.js:276
  getSubfields  JSONSchemaBridge.js:276
  render  QuickForm.js:64
  finishClassComponent  react-dom.development.js:15141
  updateClassComponent  react-dom.development.js:15096
  beginWork  react-dom.development.js:15980
  performUnitOfWork  react-dom.development.js:19102
  workLoop  react-dom.development.js:19143
  callCallback  react-dom.development.js:147
  invokeGuardedCallbackDev  react-dom.development.js:196
  invokeGuardedCallback  react-dom.development.js:250
  replayUnitOfWork  react-dom.development.js:18350
  renderRoot  react-dom.development.js:19261
  performWorkOnRoot  react-dom.development.js:20165
  performWork  react-dom.development.js:20075
  performSyncWork  react-dom.development.js:20049
  interactiveUpdates$1  react-dom.development.js:20337
  interactiveUpdates  react-dom.development.js:2267
  dispatchInteractiveEvent  react-dom.development.js:5083
  dispatchInteractiveEvent self-hosted:1018:17

[dacioromero]

I tried converting it to have the properties method that it was expecting to no avail.

I think that the bridge wasn't updated whenever the $ref keyword was added. Here's documentation explaining how it works.

Somehow JSONSchemaBridge needs to resolve $refs, perhaps there's a package that makes this easier and takes maintaining it out of your hands.

JSON Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {
    "CargoShip": {
      "type": "object",
      "additionalProperties": false,
      "properties": {
        "hatches": {
          "type": "array",
          "items": {
            "$ref": "#/definitions/Hatch"
          },
          "minItems": 6,
          "maxItems": 6
        }
      },
      "required": [
        "hatches"
      ],
      "title": "CargoShip"
    },
    "Hatch": {
      "type": "object",
      "additionalProperties": false,
      "properties": {
        "panel": {
          "type": "boolean"
        },
        "cargo": {
          "type": "boolean"
        }
      },
      "required": [
        "cargo",
        "panel"
      ],
      "title": "Hatch"
    },
    "Rocket": {
      "type": "object",
      "additionalProperties": false,
      "properties": {
        "hatches": {
          "type": "array",
          "items": {
            "$ref": "#/definitions/Hatch"
          },
          "minItems": 8,
          "maxItems": 8
        },
        "highestLevel": {
          "type": "integer"
        }
      },
      "required": [
        "hatches",
        "highestLevel"
      ],
      "title": "Rocket"
    }
  },
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "rocket": {
      "$ref": "#/definitions/Rocket"
    },
    "cargoShip": {
      "$ref": "#/definitions/CargoShip"
    }
  },
  "required": [
    "cargoShip",
    "rocket"
  ]
}

UPDATE: I found a resolver that could help tremendously.

[janowsiany]

Hey @DacioRomero
As you already mentioned the problem here is that your schema does not have top level properties, at the moment the JSONSchemaBridge does not have an ability to resolve top level $ref. Perhaps it is worth to mention that limitation in the docs or to implement this. Let me try to investigate possibilities, i will answer soon.

[radekmie]

Hi @DacioRomero. As @janowsiany already said: we are working on it.

[dacioromero]

The npm package hasn't been updated with the fix, could it be released soon?

[radekmie]

@DacioRomero: I'll release it this week.