# Jsonforms integration in adminjs

**URL:** <https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185>\
**Category:** General\
**Created:** [June 17, 2024, 2:58pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185 "2024-06-17T14:58:54Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 17, 2024, 2:58pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/1 "2024-06-17T14:58:54Z")

</div>

hello,  
is there a reason why my server can’t bundle correctly this code ?  
can’t I use jsonforms as react component ?? it’s to make a customized component in adminjs  
Thanks

import { allowOverride, Edit, EditPropertyProps, ShowPropertyProps} from ‘adminjs’;  
import { FormGroup, FormMessage, Label, RichTextEditor, TextArea, Input } from ‘@adminjs/design-system’;  
import React, { FC, useMemo, useState, ReactElement } from ‘react’;  
import { JsonForms } from ‘@jsonforms/react’;  
import { materialCells, materialRenderers} from ‘@jsonforms/material-renderers’;  
const MyInputComponent:FC = (props): ReactElement =\> {  
const schema = {  
“type”: “object”,  
“properties”: {  
“name”: {  
“type”: “string”,  
“minLength”: 1  
},  
“description”: {  
“title”: “Long Description”,  
“type”: “string”  
}  
},  
“required”: [“name”]  
}  
const uischema={  
“type”: “VerticalLayout”,  
“elements”: [  
{  
“type”: “Control”,  
“scope”: “#/properties/name”  
},  
{  
“type”: “Control”,  
“scope”: “#/properties/description”,  
“options”: {  
“multi”: true  
}  
}  
]  
}

const initialData = {}  
const { property, record, onChange } = props

const [data, setData] = useState(initialData);  
return (

  
\<JsonForms  
schema={schema}  
uischema={uischema}  
data={data}  
renderers={materialRenderers}  
cells={materialCells}  
onChange={({ data }) =\> setData(data)}  
/\>  
yyyyy
  
);  
}  
export default MyInputComponent

(my code is correctly working when i comment call in return)

---

<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:** [June 17, 2024, 3:20pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/2 "2024-06-17T15:20:52Z")

</div>

Hi @clysss,

Can you explain what the issue is? On a first glance I would expect this to work.

* * *

Note that it seems that you are creating a new `schema` with every re-render of your `MyInputComponent` which will have a large performance penalty on JSON Forms. I would like to recommend placing the `schema` into a `useMemo` or moving it out of the render path.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 17, 2024, 4:13pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/3 "2024-06-17T16:13:17Z")

</div>

i’ll try 🙂 to explain…  
i’ve open also a question to adminjs on :

> <https://github.com/SoftwareBrothers/adminjs/issues/1674>
>
> \### Contact Details
> 
> \_No response\_
> 
> \### What happened?
> 
> I'm trying to create a c…ustom component using jsonforms lib. 
> When I comment the jsonfoms call in the return (as in the sample code), everything goes fine and I see in log : 
> 2024-06-16T21:37:56.342313743Z AdminJS watch
> 2024-06-16T21:37:56.372478350Z AdminJS is under localhost:8080/admin
> 2024-06-16T21:37:56.870898268Z Executing (default): SELECT 1+1 AS result
> 2024-06-16T21:37:57.117968255Z - Bundling files...
> 2024-06-16T21:37:57.441022456Z ✔ Finish bundling: 2 files
> and when I uncomment it, the bundling never goes on and i've in interface : when i try to see the item :
> Javascript Error
> Error: Component "MyInput" has not been bundled, ensure it was added to your ComponentLoader instance (the one included in AdminJS options).
> See development console for more details...
> 
> 
> \### Bug prevalence
> 
> every time
> 
> \### AdminJS dependencies version
> 
> {
> "name": "cy\_42k\_mvp",
> "version": "1.0.0",
> "main": "dist/server.js",
> "author": "",
> "license": "ISC",
> "type": "module",
> "scripts": {
> "dev": "ts-node-dev --transpile-only --inspect --ignore-watch node\_modules src/server.ts",
> "build": "tsc",
> "start": "node --loader ts-node/esm src/server.ts"
> },
> "dependencies": {
> "@adminjs/express": "^6.1.0",
> "@adminjs/sequelize": "^4.1.1",
> "adminjs": "^7.8.1",
> "bcrypt": "~5.0.1",
> "chai": "^4.3.10",
> "cors": "^2.8.5",
> "dotenv": "^16.0.1",
> "express": "^4.19.2",
> "jsonwebtoken": "\>=9.0.0",
> "pg": "^8.11.5",
> "sequelize": "^6.37.3",
> "sequelize-cli": "^6.6.2",
> "swagger-jsdoc": "^6.2.8",
> "swagger-ui-express": "^5.0.0",
> "@jsonforms/core": "3.3.0",
> "@jsonforms/material-renderers": "3.3.0",
> "@jsonforms/react": "3.3.0",
> "react": "^18.3.1",
> "react-dom": "^18.3.1"
> },
> "devDependencies": {
> "@types/bcrypt": "~5.0.0",
> "@types/chai": "^4.3.11",
> "@types/cors": "^2.8.13",
> "@types/express": "^4.17.21",
> "@types/jsonwebtoken": "^9.0.1",
> "@types/mocha": "^10.0.6",
> "@types/node": "^20.14.2",
> "@types/supertest": "^2.0.16",
> "@types/swagger-jsdoc": "^6.0.4",
> "@types/swagger-ui-express": "^4.1.6",
> "@typescript-eslint/eslint-plugin": "^6.13.2",
> "chai": "^4.3.10",
> "eslint": "^8.55.0",
> "eslint-config-prettier": "^9.1.0",
> "eslint-config-standard-with-typescript": "^40.0.0",
> "eslint-plugin-import": "^2.29.0",
> "eslint-plugin-n": "^16.3.1",
> "eslint-plugin-prettier": "^5.0.1",
> "eslint-plugin-promise": "^6.1.1",
> "mocha": "^10.2.0",
> "prettier": "^3.1.0",
> "supertest": "^6.3.3",
> "ts-node": "^10.9.2",
> "ts-node-dev": "^2.0.0",
> "typescript": "^5.4.5"
> }
> }
> 
> 
> \### What browsers do you see the problem on?
> 
> Firefox
> 
> \### Relevant log output
> 
> \`\`\`bash
> 2024-06-16T21:37:56.342313743Z AdminJS watch
> 2024-06-16T21:37:56.372478350Z AdminJS is under localhost:8080/admin
> 2024-06-16T21:37:56.870898268Z Executing (default): SELECT 1+1 AS result
> 2024-06-16T21:37:57.117968255Z - Bundling files...
> 2024-06-16T21:37:57.441022456Z ✔ Finish bundling: 2 files
> \`\`\`
> 
> 
> \### Relevant code that's giving you issues
> 
> \`\`\`TypeScript
> import { allowOverride, Edit, EditPropertyProps, ShowPropertyProps} from 'adminjs';
> import { FormGroup, FormMessage, Label, RichTextEditor, TextArea, Input } from '@adminjs/design-system';
> import React, { FC, useMemo, useState, ReactElement } from 'react';
> import { JsonForms } from '@jsonforms/react';
> import { materialCells, materialRenderers} from '@jsonforms/material-renderers';
> const MyInputComponent:FC\<EditPropertyProps\> = (props): ReactElement =\> {
> const schema = {
> "type": "object",
> "properties": {
> "name": {
> "type": "string",
> "minLength": 1
> },
> "description": {
> "title": "Long Description",
> "type": "string"
> }
> },
> "required": \["name"\]
> }
> const uischema={
> "type": "VerticalLayout",
> "elements": \[
> {
> "type": "Control",
> "scope": "#/properties/name"
> },
> {
> "type": "Control",
> "scope": "#/properties/description",
> "options": {
> "multi": true
> }
> }
> \]
> }
>        
> const initialData = {}
> const { property, record, onChange } = props
> 
> const \[data, setData\] = useState(initialData);
> return (
> \<div\>
> /\* \<JsonForms
> schema={schema}
> uischema={uischema}
> data={data}
> renderers={materialRenderers}
> cells={materialCells}
> onChange={({ data }) =\> setData(data)}
> /\>\*/
> yyyyy\</div\>
> );
> }
> export default MyInputComponent
> \`\`\`

adminjs don’t bundle file but I don’t really know why… !  
what is sure is that when I add jsonform into myinputcomponent, the time to load the server is so long…  
How could I “move out of the render path” the schema? you mean put the const out of MyInputComponent ?  
I changed the code to :  
export default memo(MyInputComponent)  
=\> it’s worse, this seems to overload the server and never completly start  
but perhaps you were talking about using useMemo during onchange ?

thx sdirix

---

<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:** [June 17, 2024, 6:13pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/4 "2024-06-17T18:13:22Z")

</div>

I’m not familiar with adminjs. Looking at the docs it seems like you explicitly need to declare which components you are using, see [here](https://docs.adminjs.co/ui-customization/writing-your-own-components). So I would expect that you also need to add the `MyInputComponent` somewhere.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 17, 2024, 6:39pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/5 "2024-06-17T18:39:06Z")

</div>

when I remove the call to jsonforms (ie when I put // in front of) the component is correctly called and I see the DIV…

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [June 18, 2024, 8:34am UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/6 "2024-06-18T08:34:46Z")

</div>

Hi @clysss , did you try moving your schema definition either completely outside the component or use React’s `useMemo` hook to avoid recreating it everytime?  
I could imagine there being some endless re-rendering loop with the schema being re-created on every re-render like in your code snippet above.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 18, 2024, 9:08am UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/7 "2024-06-18T09:08:04Z")

</div>

Interesting  
Where should I put the usememo in your opinion?  
For adminjs it could be come from mui renderers as adminjs don’t use them  
Could this help you?

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [June 18, 2024, 1:51pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/8 "2024-06-18T13:51:08Z")

</div>

Hi @clysss,  
Please have a look at the `useMemo` documentation here: [useMemo – React](https://react.dev/reference/react/useMemo)

For your schema this could look like this:

```ts
const schema = React.useMemo(() => ({
  “type”: “object”,
  “properties”: {
  “name”: {
  “type”: “string”,
  “minLength”: 1
  },
  “description”: {
  “title”: “Long Description”,
  “type”: “string”
  }
  },
  “required”: [“name”]
}), []);

```

Note that you also need to do this for the `uischema`.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 18, 2024, 7:37pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/9 "2024-06-18T19:37:58Z")

</div>

I add use.Memo but it’s worse !  
to resume 🙂

- when I use not useMemo and only MUI button , the component is correctly bundled
- when I use use Memo and only \< Button\> =\> error

import { allowOverride, Edit, BasePropertyProps } from ‘adminjs’;  
import { FormGroup, FormMessage, Label, RichTextEditor, TextArea, Input } from ‘@adminjs/design-system’;  
import React, { FC, useMemo, useState, ReactElement } from ‘react’;  
import { JsonForms } from ‘@jsonforms/react’;  
import { Grid, Button, Typography } from ‘@mui/material’;  
import { materialCells, materialRenderers } from ‘@jsonforms/material-renderers’;  
const schema = React.useMemo(() =\> ({  
“type”: “object”,  
“properties”: {  
“name”: {  
“type”: “string”,  
“minLength”: 1  
},  
“description”: {  
“title”: “Long Description”,  
“type”: “string”  
}  
},  
“required”: [“name”]  
}), );

const uischema = React.useMemo(() =\> ({  
“type”: “VerticalLayout”,  
“elements”: [  
{  
“type”: “Control”,  
“scope”: “#/properties/name”  
},  
{  
“type”: “Control”,  
“scope”: “#/properties/description”,  
“options”: {  
“multi”: true  
}  
}  
]  
}), );

const initialData = {}

//const MyInputComponent:FC = (props): ReactElement =\> {  
const MyInputComponent = (props: BasePropertyProps) =\> {

const { property, record, onChange } = props

const [data, setData] = useState(initialData);  
return (  
/\*

```
  <JsonForms
    schema={schema}
    uischema={uischema}
    data={data}
    renderers={materialRenderers}
    cells={materialCells}
    onChange={({ data }) => setData(data)}
  />
  aaaa

  bbbbb

```

\*/

```
  <Button>xxxx</Button>
  //</div>

```

);  
}

export default MyInputComponent

---

<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:** [June 19, 2024, 7:09am UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/10 "2024-06-19T07:09:13Z")

</div>

Hi @clysss,

You need to do one of the following, not both:

- Use `useMemo` but do it within the `MyInputComponent`. `useMemo` is a hook and can only be used within “render” code
- Keep the `schema` and `uischema` outside of `MyInputComponent`, but then remove the `useMemo`

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 19, 2024, 11:33am UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/11 "2024-06-19T11:33:52Z")

</div>

ok undestood  
but not better :  
i also use to add memory cf : [[Bug]: can't correctly create custom component when importing external lib · Issue #1674 · SoftwareBrothers/adminjs · GitHub](https://github.com/SoftwareBrothers/adminjs/issues/1674#issuecomment-2176947960)  
but without success

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 19, 2024, 1:31pm UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/12 "2024-06-19T13:31:28Z")

</div>

after upgrading server to 16Go mem and 12Go stack, , has been able to bundle and see the component. 🙂  
but it takes 18 minutes to start and of course I can’t afford a 16Go server for that!!  
So… how can I “import files from their librarie so that tree shaking works” ?  
thx

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 29, 2024, 11:26am UTC](https://jsonforms.discourse.group/t/jsonforms-integration-in-adminjs/2185/13 "2024-06-29T11:26:17Z")

</div>

– ok –  
not found a solution after a week. I forget adminjs and use another crud solution