No applicable renderer found. Next.js+Chakra

General
1

Versions used:

"@chakra-ui/react": "^3.2.5",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@jsonforms/core": "^3.5.1",
"@jsonforms/react": "^3.5.1",
"framer-motion": "^10.0.0",
"next": "^14.2.3",
"react": "18.2.0",

The goal I’m trying to reach is really simple. Just render Input components based on JSON schemas. No custom validation and so on.
This is the component Im trying to render:

const CustomTextField = ({
  data,
  handleChange,
  path,
  label,
  description,
  errors,
}: any) => {
  return (
    <FormInputWrapper label={label} description={description} errors={errors}>
      <Input
        value={data || ""}
        onChange={(e) => handleChange(path, e.target.value)}
        ...cosmetics
      />
    </FormInputWrapper>
  );
};

export const CustomTextFieldRenderer =
  withJsonFormsControlProps(CustomTextField);

export const customTextFieldTester = rankWith(4, isStringControl);

Chakra Renderer:

export const chakraRenderers = [
  { tester: customTextFieldTester, renderer: CustomTextFieldRenderer },
];

I tried many different combinations of schemas in order to satisfy the Tester function ( export const isStringControl = and(uiTypeIs('Control'), schemaTypeIs('string'));), but only managed to run a simple example from the docs that uses only one input - Custom Renderers - JSON Forms

Component:

const schema = {
  "properties": {
    "name": {
      "title": "Name",
      "type": "string"
    },
    "surname": {
      "title": "Surname",
      "type": "string"
    },
  },
  "required": [
    "name",
  ],
  "title": "Some Title",
  "type": "object"
}

const uischema = {
  type: "VerticalLayout", // I tried with Control here also
  // I added properties and elements since I wanted to be sure which one is used, but I also tried dozens of combinations
  properties: [
    { type: "Control", scope: "#/properties/name" },
    { type: "Control", scope: "#/properties/surname" }
  ],
  elements: [
    { type: "Control", scope: "#/properties/name" },
    { type: "Control", scope: "#/properties/surname" }
  ]
};

...

const [formData, setFormData] = useState({});
  const handleChange = ({ data }: any) => {
    setFormData(data);
  };
...
    <JsonForms
      uischema={uischema}
      schema={schema}
      data={formData}
      renderers={chakraRenderers}
      onChange={handleChange}
    />

As mentioned,I am getting the “No applicable renderer found.” error. On the tester function, I logged the schema and uischema and they are correct (same as I passed them into the JsonForms component). I’ve been stuck for hours on this, tried every permutation I could think of, and still nothing. I would appreciate some help, thanks!

2

Having the same problem, could use some help. Thank you!

3

Hi!

For this schema

{
  "properties": {
    "name": {
      "title": "Name",
      "type": "string"
    },
    "surname": {
      "title": "Surname",
      "type": "string"
    },
  },
  "required": [
    "name",
  ],
  "title": "Some Title",
  "type": "object"
}

This UI Schema should work

{
  type: "VerticalLayout",
  elements: [
    { type: "Control", scope: "#/properties/name" },
    { type: "Control", scope: "#/properties/surname" }
  ]
}

The Chakra renderers you are using are custom ones, so I don’t know how they are implemented.

By default, JSON Forms will first try to dispatch to a renderer which is able to render a VerticalLayout. So if your chakra renderer set does not contain a VerticalLayout renderer, then you will end up with the “No applicable renderer found. ” error.

A normal VerticalLayout renderer will then render some components to produce a vertical layout and then dispatch back to JSON Forms to render each element, in this case the Controls.

Do you have a VerticalLayout renderer? If not, you can get inspired by one of the base implementations, for example the one of React Material.