How to use material-renderers in a Thea app?

General
1

Hi,
I am currently using the vanillaRenderers in version 3.0.0-beta.4 in my GLSP App to render JSONForms. It looks like the materialRenderes support much more features which may be helpful for a more complex form scenario containing several arrays.

But switching from vanillaRenderers to materialRenderes results in a lot of error messages like:

open-bpmn-app: ERROR in ../../../../node_modules/@mui/material/ButtonBase/Ripple.js 8:0-48
open-bpmn-app: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/rsoika/node_modules/@mui/material/ButtonBase'
open-bpmn-app:  @ ../../../../node_modules/@mui/material/ButtonBase/TouchRipple.js 18:0-30 72:40-46
open-bpmn-app:  @ ../../../../node_modules/@mui/material/ButtonBase/ButtonBase.js 14:0-40 347:9-20
open-bpmn-app:  @ ../../../../node_modules/@mui/material/ButtonBase/index.js 1:0-39 1:0-39
open-bpmn-app:  @ ../../../../node_modules/@mui/material/index.js 45:0-53 45:0-53 46:0-29 46:0-29
...
.......
open-bpmn-app: ERROR in ../../../../node_modules/@mui/material/node_modules/@mui/base/NoSsr/NoSsr.js 14:0-48
open-bpmn-app: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/rsoika/node_modules/@mui/material/node_modules/@mui/base/NoSsr'
open-bpmn-app:  @ ../../../../node_modules/@mui/material/node_modules/@mui/base/NoSsr/index.js 1:0-34 1:0-34
open-bpmn-app:  @ ../../../../node_modules/@mui/material/NoSsr/index.js 1:0-42 1:0-42
open-bpmn-app:  @ ../../../../node_modules/@mui/material/index.js 163:0-43 163:0-43 164:0-24 164:0-24
....

my package.json file includes the following dependencies:

  "dependencies": {
    "@eclipse-glsp/client": "0.10.0-next.385713d.170",
    "@open-bpmn/open-bpmn-model": "0.2.0",
    "@jsonforms/core": "3.0.0-beta.4",
    "@jsonforms/react": "3.0.0-beta.4",
    "@jsonforms/material-renderers": "3.0.0-beta.4",
    "balloon-css": "^0.5.0"
  },

And my javascript integration (react) looks like this:

....
// Import Instruction sReact and JsonForms
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { JsonForms } from '@jsonforms/react';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';
....
.............
					// render JSONForm
					ReactDOM.render(
						<JsonForms
							data={bpmnPropertiesData}
							schema={bpmnPropertiesSchema}
							uischema={bpmnPropertiesUISchema}
							cells={materialCells}
							renderers={materialRenderers}
							onChange={({ errors, data }) => this.setState({ data })}
						/>,
						this.bodyDiv
					);
...............

If I switch back to “@jsonforms/vanilla-renderers”: "3.0.0-beta.4 my application works (even if the table-array integration is not what I am searching for:

2022-06-25_10-45
2022-06-25_10-45988×289 14.7 KB

Is there some library missing in my setup that causes this errors?

Thanks for help

===
Ralph

2

I finally succeeded after I added the following dependencies:

"@jsonforms/core": "3.0.0-beta.3",
"@jsonforms/react": "3.0.0-beta.3",
"@jsonforms/material-renderers": "3.0.0-beta.3",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.2.0",
"@mui/lab": "^5.0.0-alpha.58",
"@mui/material": "^5.2.2",
"@mui/styles": "^5.2.3",

Maybe it is helpful for other users if you add the recommended dependencies on the rederer set page:

Also I am not sure if the versions I use now are correct. I have taken it from the jsonforms-react-seed project:

But the example is still based on 3.0.0-alpha-3

3

We specify all the required dependencies via the peerDependencies mechanism of npm. See here.

Maybe it is helpful for other users if you add the recommended dependencies on the rederer set page

Yeah, could be useful :+1:. Whenever you see something lacking on our documentation feel free to open an issue here.