Error while rendering JsonForms using React Material UI

General
1

I’m trying to render the JsonForms in my react app and I have all the modules installed.

My code:

import React, { Component } from 'react';
import { JsonForms } from '@jsonforms/react';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};

const initialData = {};

class FormsPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: initialData,
    };
  }

  handleChange = ({ data, _errors }) => {
    this.setState({ data });
  };

  render() {
    return (
      <div>
        <JsonForms
          schema={schema}
          uischema={uischema}
          data={this.state.data}
          renderers={materialRenderers}
          cells={materialCells}
          onChange={this.handleChange}
        />
      </div>
    );
  }            
}

export default FormsPage;

I’m facing the below error while rendering:

useDesktopPicker.js:68 Uncaught TypeError: Object(…) is not a function
at useDesktopPicker (useDesktopPicker.js:68:37)
at DesktopDatePicker (DesktopDatePicker.js:50:23)
at renderWithHooks (react-dom.development.js:14804:1)
at updateForwardRef (react-dom.development.js:16817:1)
at beginWork (react-dom.development.js:18646:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:189:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:238:1)
at invokeGuardedCallback (react-dom.development.js:293:1)
at beginWork$1 (react-dom.development.js:23204:1)
at performUnitOfWork (react-dom.development.js:22155:1)

I’m not sure what needs to be done or if I’m doing something that is not correct. please help me with this.

2

This looks like a version mismatch with the x-date-pickers. Are you using JSON Forms 3.1.0 and compatible dependencies?

3

Hi @sdirix ,
I’m using:
“@jsonforms/core”: “^3.1.0”,
“@jsonforms/material-renderers”: “^3.1.0”,
“@jsonforms/react”: “^3.1.0”,
“@babel/plugin-proposal-nullish-coalescing-operator”: “^7.14.5”,
“@babel/plugin-proposal-optional-chaining”: “^7.14.5”,
“esbuild”: “^0.18.11”,
“esbuild-loader”: “^3.0.1”,
“babel-loader”: “^7.1.5”,
“@mui/x-date-pickers”: “^6.5.0”,
“react-scripts”: “^5.0.1”

4

Can you try with these? They do work: jsonforms-react-seed/package.json at 3ed669c5e6434919b090c7c9981f3c9a643c125c · eclipsesource/jsonforms-react-seed · GitHub

5

Hi @sdirix,
Tried with the versions from the above package file that you linked.

(My requirement: React, Material UI, JavaScript)

My Package file has,

"devDependencies": {
    "@mui/x-date-pickers": "^6.5.0",
    "@types/jest": "^28.1.6",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-modules": "^0.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.1",
    "cypress": "^6.1.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "esbuild": "^0.18.11",
    "esbuild-loader": "^3.0.1",
    "file-loader": "^3.0.1",
    "git-revision-webpack-plugin": "^3.0.3",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.0.0",
    "jest-cli": "^23.6.0",
    "less": "^3.10.1",
    "less-loader": "^5.0.0",
    "nodemon": "^1.19.1",
    "path": "^0.12.7",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dashboard": "^3.0.7",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1",
    "write-file-webpack-plugin": "^4.5.0"
  },
  "dependencies": {
    "@apidevtools/swagger-parser": "^10.0.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
    "@bpmn-io/dmn-migrate": "^0.4.3",
    "@date-io/date-fns": "^1.3.11",
    "@date-io/jalaali": "^1.3.13",
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@hot-loader/react-dom": "^16.9.0",
    "@jsonforms/core": "^3.1.0",
    "@jsonforms/material-renderers": "^3.1.0",
    "@jsonforms/react": "^3.1.0",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.2.10",
    "@mui/icons-material": "~5.11.16",
    "@mui/lab": "^5.0.0-alpha.58",
    "@mui/material": "~5.13.0",
    "@mui/styles": "^5.2.3",
    "@mui/x-date-pickers": "^6.5.0",
    "@types/node": "^14.14.14",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "atob": "^2.1.2",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.21.0",
    "body-parser": "^1.19.0",
    "bootstrap": "^3.4.1",
    "bpmn-js": "^7.4.1",
    "bpmn-js-bpmnlint": "^0.13.0",
    "bpmn-js-properties-panel": "^0.29.0",
    "bpmnlint": "^6.2.0",
    "bpmnlint-loader": "^0.1.4",
    "bpmnlint-plugin-playground": "file:./plugin",
    "browserslist": "^4.21.4",
    "btoa": "^1.2.1",
    "clean-webpack-plugin": "^1.0.0",
    "clone": "^2.1.2",
    "config": "^3.2.3",
    "curl": "^0.1.4",
    "date-fns": "^2.0.0-beta.5",
    "dmn-js": "10.1.0",
    "dmn-js-properties-panel": "^0.6.2",
    "es6-promise": "^4.2.8",
    "file-saver": "^2.0.5",
    "history": "^4.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jodit-react": "^1.0.70",
    "jszip": "^3.10.1",
    "moment-jalaali": "^0.9.2",
    "node-libcurl": "^3.0.0",
    "promise": "^8.0.3",
    "prop-types": "^15.7.2",
    "query-string": "^6.9.0",
    "re-resizable": "^4.0.0",
    "react": "^17.0.1",
    "react-bootstrap": "^2.6.0",
    "react-color": "^2.19.3",
    "react-cron-generator": "^1.1.5",
    "react-csv": "^2.0.3",
    "react-csv-downloader": "^2.2.0",
    "react-d3-tree": "^1.17.1",
    "react-dom": "^17.0.1",
    "react-drop-zone": "^3.0.6",
    "react-hot-loader": "^4.9.0",
    "react-intl": "^4.5.0",
    "react-json-editor-ajrm": "^2.5.13",
    "react-json-path-picker": "^1.0.5",
    "react-json-pretty": "^2.1.0",
    "react-json-view": "^1.19.1",
    "react-mdl": "^1.11.0",
    "react-redux": "^6.0.1",
    "react-responsive-modal": "^3.6.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^5.0.1",
    "react-swipeable-views": "^0.13.3",
    "react-tree-graph": "^4.0.0",
    "react-xml-parser": "^1.1.8",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-dynamic-modules": "^3.5.0",
    "redux-dynamic-modules-thunk": "^3.5.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "typescript": "^4.1.3",
    "xlsx": "^0.18.5",
    "xregexp": "^5.1.1"
  }

> Still the error persists:

useDesktopPicker.js:68 Uncaught TypeError: Object(...) is not a function
    at useDesktopPicker (useDesktopPicker.js:68:37)
    at DesktopDatePicker (DesktopDatePicker.js:50:23)
    at renderWithHooks (react-dom.development.js:14804:1)
    at updateForwardRef (react-dom.development.js:16817:1)
    at beginWork (react-dom.development.js:18646:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238:1)
    at invokeGuardedCallback (react-dom.development.js:293:1)
    at beginWork$1 (react-dom.development.js:23204:1)
    at performUnitOfWork (react-dom.development.js:22155:1)

The above error occurred in the <ForwardRef(DesktopDatePicker)> component:
    in ForwardRef(DesktopDatePicker) (created by ForwardRef(DatePicker))
    in ForwardRef(DatePicker) (created by MaterialDateControl)
    in LocalizationProvider (created by MaterialDateControl)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by MaterialDateControl)
    in MaterialDateControl (created by WithContextToControlProps)
    in WithContextToControlProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by TestAndRender2)
    in TestAndRender2 (created by JsonFormsDispatchRenderer)
    in JsonFormsDispatchRenderer
    in JsonFormsDispatchRenderer (created by WithContextToJsonFormsRendererProps)
    in WithContextToJsonFormsRendererProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by MaterialLayoutRendererComponent)
    in MaterialLayoutRendererComponent (created by MaterialHorizontalLayoutRenderer)
    in MaterialHorizontalLayoutRenderer (created by WithContextToLayoutProps)
    in WithContextToLayoutProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by TestAndRender2)
    in TestAndRender2 (created by JsonFormsDispatchRenderer)
    in JsonFormsDispatchRenderer
    in JsonFormsDispatchRenderer (created by WithContextToJsonFormsRendererProps)
    in WithContextToJsonFormsRendererProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by MaterialLayoutRendererComponent)
    in MaterialLayoutRendererComponent (created by MaterialVerticalLayoutRenderer)
    in MaterialVerticalLayoutRenderer (created by WithContextToLayoutProps)
    in WithContextToLayoutProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by TestAndRender2)
    in TestAndRender2 (created by JsonFormsDispatchRenderer)
    in JsonFormsDispatchRenderer
    in JsonFormsDispatchRenderer (created by WithContextToJsonFormsRendererProps)
    in WithContextToJsonFormsRendererProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by JsonForms)
    in JsonFormsStateProvider (created by JsonForms)
    in JsonForms (created by FormsPage)
    in div (created by FormsPage)
    in FormsPage (created by FormsConfiguration)
    in div (created by FormsConfiguration)
    in FormsConfiguration (created by Context.Consumer)
    in div (created by Content)
    in Content (created by Context.Consumer)
    in div (created by Layout)
    in div (created by Layout)
    in MDLComponent (created by Layout)
    in Layout (created by Context.Consumer)
    in IntlProvider (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Route (created by PrivateRoute)
    in PrivateRoute (created by MainRouter)
    in Switch (created by MainRouter)
    in MainRouter (created by RootView)
    in div (created by RootView)
    in div (created by RootView)
    in RootView (created by Context.Consumer)
    in Connect(RootView) (created by App)
    in DynamicModuleLoaderImpl (created by Context.Consumer)
    in DynamicModuleLoader (created by App)
    in Provider (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp
6

@sdirix
Update:
After I changed the version of @mui/x-date-pickers to “^5.0.20”, I’m getting the below error while rendering:

Warning: Failed prop type: The prop `renderInput` is marked as required in `ForwardRef(DesktopDatePicker)`, but its value is `undefined`.
    at DesktopDatePicker 
    in ForwardRef(DatePicker) (created by MaterialDateControl)
    in LocalizationProvider (created by MaterialDateControl)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by MaterialDateControl)
    in MaterialDateControl (created by WithContextToControlProps)
    in WithContextToControlProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by TestAndRender2)
    in TestAndRender2 (created by JsonFormsDispatchRenderer)
    in JsonFormsDispatchRenderer
    in JsonFormsDispatchRenderer (created by WithContextToJsonFormsRendererProps)
    in WithContextToJsonFormsRendererProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by MaterialLayoutRendererComponent)
    in MaterialLayoutRendererComponent (created by MaterialHorizontalLayoutRenderer)
    in MaterialHorizontalLayoutRenderer (created by WithContextToLayoutProps)
    in WithContextToLayoutProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by TestAndRender2)
    in TestAndRender2 (created by JsonFormsDispatchRenderer)
    in JsonFormsDispatchRenderer
    in JsonFormsDispatchRenderer (created by WithContextToJsonFormsRendererProps)
    in WithContextToJsonFormsRendererProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in div (created by MuiGridRoot)
    in MuiGridRoot (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by MaterialLayoutRendererComponent)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by MaterialLayoutRendererComponent)
    in MaterialLayoutRendererComponent (created by MaterialVerticalLayoutRenderer)
    in MaterialVerticalLayoutRenderer (created by WithContextToLayoutProps)
    in WithContextToLayoutProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by TestAndRender2)
    in TestAndRender2 (created by JsonFormsDispatchRenderer)
    in JsonFormsDispatchRenderer
    in JsonFormsDispatchRenderer (created by WithContextToJsonFormsRendererProps)
    in WithContextToJsonFormsRendererProps (created by WithJsonFormsContext)
    in WithJsonFormsContext (created by JsonForms)
    in JsonFormsStateProvider (created by JsonForms)
    in JsonForms (created by FormsPage)
    in div (created by FormsPage)
    in FormsPage (created by FormsConfiguration)
    in div (created by FormsConfiguration)
    in FormsConfiguration (created by Context.Consumer)
    in div (created by Content)
    in Content (created by Context.Consumer)
    in div (created by Layout)
    in div (created by Layout)
    in MDLComponent (created by Layout)
    in Layout (created by Context.Consumer)
    in IntlProvider (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Route (created by PrivateRoute)
    in PrivateRoute (created by MainRouter)
    in Switch (created by MainRouter)
    in MainRouter (created by RootView)
    in div (created by RootView)
    in div (created by RootView)
    in RootView (created by Context.Consumer)
    in Connect(RootView) (created by App)
    in DynamicModuleLoaderImpl (created by Context.Consumer)
    in DynamicModuleLoader (created by App)
    in Provider (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp


Uncaught TypeError: renderInput is not a function
    at KeyboardDateInput (KeyboardDateInput.js:32:1)
    at renderWithHooks (react-dom.development.js:14804:1)
    at updateForwardRef (react-dom.development.js:16817:1)
    at beginWork (react-dom.development.js:18646:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238:1)
    at invokeGuardedCallback (react-dom.development.js:293:1)
    at beginWork$1 (react-dom.development.js:23204:1)
    at performUnitOfWork (react-dom.development.js:22155:1)
    at workLoopSync (react-dom.development.js:22131:1)
7

@sdirix any solution/ reason for the above issue?

I’m trying to use JsonForms in our application and was stuck at the starting step while trying to render the sample provided in the JsonForms docs.

Thanks in advance!

8

It seems like you are mixing Material UI v4 and Material UI v5. This will definitely lead to problems.

1 Like
9

Thanks for your response @sdirix ! I will look into it!