# No applicable renderer found. Next.js+Chakra

**URL:** <https://jsonforms.discourse.group/t/no-applicable-renderer-found-next-js-chakra/2551>\
**Category:** General\
**Created:** [January 14, 2025, 4:13pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-next-js-chakra/2551 "2025-01-14T16:13:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marin-ingemark](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/marin-ingemark/32/1204_2.png) [@marin-ingemark](https://jsonforms.discourse.group/u/marin-ingemark)\
**Post date:** [January 14, 2025, 4:13pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-next-js-chakra/2551/1 "2025-01-14T16:13:05Z")

</div>

Versions used:

```auto
"@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:

```auto
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:

```auto
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](https://jsonforms.io/docs/tutorial/custom-renderers)

Component:

```auto
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!

---

<div class="post-metadata">

**Author:** ![Huzi610](https://avatars.discourse-cdn.com/v4/letter/h/b2d939/32.png) [@Huzi610](https://jsonforms.discourse.group/u/Huzi610)\
**Post date:** [January 15, 2025, 7:53am UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-next-js-chakra/2551/2 "2025-01-15T07:53:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [January 15, 2025, 1:12pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-next-js-chakra/2551/3 "2025-01-15T13:12:41Z")

</div>

Hi!

For this schema

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

```

This UI Schema should work

```auto
{
  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 `Control`s.

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](https://github.com/eclipsesource/jsonforms/blob/4981cf9208c76a9453e8a23a13f41cee03fb92fb/packages/material-renderers/src/layouts/MaterialVerticalLayout.tsx).