Date pickers not rendered with "3.0.0-rc.0"

[sdirix]

Describe the bug

Date pickers are not rendered when using some combination of the React Material renderers with Material UI.

Expected behavior

All pickers (date, date-time, time) should work

Steps to reproduce the issue

• Reported here.
• Reproducible here

Screenshots

No response

In which browser are you experiencing the issue?

Chrome 104.0.5112.79

Framework

React

RendererSet

Material

Additional context

No response

[stumpykilo]

@sdirix I was going to attempt to take a look at this but am having issues getting started. Are there some instructions on how to get up and running to contribute? I was following these instructions: https://github.com/eclipsesource/jsonforms#developers-documentation.

[sdirix]

Hi @stumpykilo What exactly are you struggling with to getting started? The instructions are up to date.

[stumpykilo]

@sdirix sorry for the delay. I am able to run through the First time setup (I'm running Node v16.16.0 and npm v8.11.0) but when I get down to the Build & Testing I encounter an error when running npm run build in @jsonforms/angular-material and it exits. I then try to cd packages/material and run npm run build but get the following error:

created lib/jsonforms-react-material.esm.js in 3.3s

src/index.ts → lib/jsonforms-react-material.cjs.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@mui/icons-material/Close (imported by src\mui-controls\MuiInputText.tsx)
@mui/lab/AdapterDayjs (imported by src\controls\MaterialDateTimeControl.tsx, src\controls\MaterialTimeControl.tsx, src\controls\MaterialDateControl.tsx)
@mui/material/Input (imported by src\cells\MaterialDateCell.tsx)
[!] (plugin rpt2) Error: UNKNOWN: unknown error, open 'C:\src\jsonforms\packages\material\node_modules\.cache\rollup-plugin-typescript2/rpt2_da9efe9879adb1d33b1674ccb1aac7ebdb5cb9ac/code/cache_/6f23fa1ca09182b90ab8dbd4d8b7e9504876efb5'
src\cells\CustomizableCells.ts
Error: UNKNOWN: unknown error, open 'C:\src\jsonforms\packages\material\node_modules\.cache\rollup-plugin-typescript2/rpt2_da9efe9879adb1d33b1674ccb1aac7ebdb5cb9ac/code/cache_/6f23fa1ca09182b90ab8dbd4d8b7e9504876efb5'
    at Object.openSync (node:fs:585:3)
    at Object.writeFileSync (node:fs:2170:35)
    at Object.writeJsonSync (C:\src\jsonforms\node_modules\jsonfile\index.js:117:13)
    at RollingCache.write (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\src\rollingcache.ts:81:3)
    at TsCache.getCompiled (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\src\tscache.ts:231:18)
    at Object.transform (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\src\index.ts:197:27)
    at C:\src\jsonforms\node_modules\rollup\dist\shared\rollup.js:22681:25

Should I use Node 14 and npm 6?

[sdirix]

Our mono repo setup is quite complicated. On Linux it usually works with any Node 14+ (did not test with npm 8) but on Windows and Mac it seems to fail when using anything else besides Node 14. Even with Node 14 the test cases currently fail on Mac.

So yes I would recommend using Node 14 and npm 6 for now. If you're not using it yet, I can definitely recommend nvm to quickly switch between different Node versions on Windows. Don't forget to enable Windows 10 developer mode if you haven't already.

[stumpykilo]

@sdirix success! Thank you for your quick response. We use volta on our Windows machines and that seemed to work, I was able to run the packages/material npm run dev after running through the First time setup and npm run build.

[stumpykilo]

@sdirix weird, I added a npm package (@mui/x-date-pickers) to packages/material and run npm run init and npm run build and get the error below. Is there a specific way I need to add packages?

lerna ERR! npm run build exited 1 in '@jsonforms/material-renderers'
lerna ERR! npm run build stdout:

> @jsonforms/material-renderers@3.0.0-rc.0 build C:\src\jsonforms\packages\material
> rollup -c rollup.config.js


lerna ERR! npm run build stderr:

src/index.ts → lib/jsonforms-react-material.esm.js...
[!] (plugin rpt2) Error: C:/src/jsonforms/packages/material/src/layouts/MaterialCategorizationStepperLayout.tsx(117,6): semantic error TS2786: 'Hidden' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass'.
      Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'import("C:/src/jsonforms/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
src\layouts\MaterialCategorizationStepperLayout.tsx
Error: C:/src/jsonforms/packages/material/src/layouts/MaterialCategorizationStepperLayout.tsx(117,6): semantic error TS2786: 'Hidden' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass'.
      Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'import("C:/src/jsonforms/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
    at error (C:\src\jsonforms\node_modules\rollup\dist\shared\rollup.js:158:30)
    at throwPluginError (C:\src\jsonforms\node_modules\rollup\dist\shared\rollup.js:21769:12)
    at Object.error (C:\src\jsonforms\node_modules\rollup\dist\shared\rollup.js:22472:20)
    at Object.error (C:\src\jsonforms\node_modules\rollup\dist\shared\rollup.js:21945:38)
    at RollupContext.error (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\src\rollupcontext.ts:37:18)
    at C:\src\jsonforms\node_modules\rollup-plugin-typescript2\src\print-diagnostics.ts:41:11
    at arrayEach (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\node_modules\lodash\lodash.js:530:11)
    at Function._.each [as forEach] (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\node_modules\lodash\lodash.js:9410:14)
    at printDiagnostics (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\src\print-diagnostics.ts:9:2)
    at Object.transform (C:\src\jsonforms\node_modules\rollup-plugin-typescript2\src\index.ts:244:5)