Error setting up VS Code dev container

General
1

Hi all,

I am running into an error when starting (and also rebuilding) the VS Code dev container, and I was wondering if anyone else ran into something like this. The crux of the error seems to be “semantic error TS2786: ‘Hidden’ cannot be used as a JSX component.”. Is this not happening for others? Here is the rest of the relevant part of the error message:

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

> @jsonforms/material-renderers@3.1.0-alpha.0 build /workspaces/jsonforms/packages/material-renderers
> rollup -c rollup.config.js


lerna ERR! npm run build stderr:

src/index.ts → lib/jsonforms-react-material.esm.js...
[!] (plugin rpt2) Error: /workspaces/jsonforms/packages/material-renderers/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("/workspaces/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: /workspaces/jsonforms/packages/material-renderers/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("/workspaces/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 (/workspaces/jsonforms/node_modules/rollup/dist/shared/rollup.js:198:30)
    at throwPluginError (/workspaces/jsonforms/node_modules/rollup/dist/shared/rollup.js:21718:12)
    at Object.error (/workspaces/jsonforms/node_modules/rollup/dist/shared/rollup.js:22672:20)
    at Object.error (/workspaces/jsonforms/node_modules/rollup/dist/shared/rollup.js:21895:42)
    at RollupContext.error (/workspaces/jsonforms/node_modules/rollup-plugin-typescript2/src/rollupcontext.ts:37:18)
    at /workspaces/jsonforms/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:41:11
    at arrayEach (/workspaces/jsonforms/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:530:11)
    at Function._.each [as forEach] (/workspaces/jsonforms/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:9410:14)
    at printDiagnostics (/workspaces/jsonforms/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:9:2)
    at Object.transform (/workspaces/jsonforms/node_modules/rollup-plugin-typescript2/src/index.ts:244:5)
2

Hi @brockfanning,

I just created a new dev container from scratch and it built fine for me. Can you try runnning git clean -dfx && npm ci && npm run init && npm run build within your container and/or create it from scratch to see whether you can reproduce the problem?

3

@sdirix Appreciate the confirmation – I did end up trying it again, and this time it worked. Must have been user error.

1 Like