i-VRESSE / workflow-builder

Graphical interface to build a workflow file
https://i-vresse-workflow-builder.netlify.app/
Apache License 2.0
3 stars 2 forks source link

topoaa.mol.description causes app to error #81

Open sverhoeven opened 2 years ago

sverhoeven commented 2 years ago

The topoaa.mol parameter is the first type=array parameter which has a description. When schema is tested on https://rjsf-team.github.io/react-jsonschema-form/ the description is rendered correctly.

To reproduce

  1. In public/catalog/haddock3.easy.yaml find the mol schema and add description: Some description.
  2. npm run dev
  3. Load example
  4. Select topoaa in middle column
  5. Expand Input molecules

I expected to see a sub form, but I got a error.

Error in console ```js react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `ArrayFieldDescription2`. at ArrayFieldDescription2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:212:33) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:207:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:169:23 at div at DefaultNormalArrayFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:296:39) at ArrayFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:192:22) at ArrayField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:11676:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:490:23 at FieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:368:17) at SchemaField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:13480:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:207:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:169:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:204:23 at ObjectFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:387:32) at ObjectField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:12867:5) at div at CollapsibleField (http://localhost:3000/src/CollapsibleField.tsx:22:13) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:490:23 at FieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:368:17) at SchemaField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:13480:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:207:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:169:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:204:23 at ObjectFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:387:32) at ObjectField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:12867:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:490:23 at FieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:368:17) at SchemaField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:13480:5) at form at Form2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:16497:5) at http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:16976:23 at NodeForm (http://localhost:3000/src/NodeForm.tsx:22:35) at fieldset at NodePanel (http://localhost:3000/src/NodePanel.tsx:22:29) at div at GridArea (http://localhost:3000/src/App.tsx:28:3) at div at Suspense at ErrorBoundary (http://localhost:3000/src/ErrorBoundary.tsx:5:8) at DndProvider2 (http://localhost:3000/node_modules/.vite/deps/react-dnd.js?v=8f9c04b2:2784:23) at RecoilRoot_INTERNAL (http://localhost:3000/node_modules/.vite/deps/recoil.js?v=8f9c04b2:2464:3) at RecoilRoot (http://localhost:3000/node_modules/.vite/deps/recoil.js?v=8f9c04b2:2575:5) at Wrapper (http://localhost:3000/src/Wrapper.tsx:25:3) at App printWarning @ react.development.js:220 react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `ArrayFieldDescription2`. at createFiberFromTypeAndProps (react-dom.development.js:25058:21) at createFiberFromElement (react-dom.development.js:25086:15) at reconcileSingleElement (react-dom.development.js:14052:23) at reconcileChildFibers2 (react-dom.development.js:14112:35) at reconcileChildren (react-dom.development.js:16990:28) at mountIndeterminateComponent (react-dom.development.js:17890:5) at beginWork (react-dom.development.js:19049:16) at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16) at invokeGuardedCallback (react-dom.development.js:4056:31) react-dom.development.js:20085 The above error occurred in the component: at ArrayFieldDescription2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:212:33) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:207:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:169:23 at div at DefaultNormalArrayFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:296:39) at ArrayFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:192:22) at ArrayField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:11676:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:490:23 at FieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:368:17) at SchemaField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:13480:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:207:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:169:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:204:23 at ObjectFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:387:32) at ObjectField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:12867:5) at div at CollapsibleField (http://localhost:3000/src/CollapsibleField.tsx:22:13) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:490:23 at FieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:368:17) at SchemaField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:13480:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:207:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:169:23 at div at http://localhost:3000/node_modules/.vite/deps/chunk-BK3S5FMQ.js?v=8f9c04b2:204:23 at ObjectFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:387:32) at ObjectField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:12867:5) at div at http://localhost:3000/node_modules/.vite/deps/chunk-YBP25ECQ.js?v=8f9c04b2:490:23 at FieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_bootstrap-4.js?v=8f9c04b2:368:17) at SchemaField2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:13480:5) at form at Form2 (http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:16497:5) at http://localhost:3000/node_modules/.vite/deps/chunk-T4IBOB7J.js?v=8f9c04b2:16976:23 at NodeForm (http://localhost:3000/src/NodeForm.tsx:22:35) at fieldset at NodePanel (http://localhost:3000/src/NodePanel.tsx:22:29) at div at GridArea (http://localhost:3000/src/App.tsx:28:3) at div at Suspense at ErrorBoundary (http://localhost:3000/src/ErrorBoundary.tsx:5:8) at DndProvider2 (http://localhost:3000/node_modules/.vite/deps/react-dnd.js?v=8f9c04b2:2784:23) at RecoilRoot_INTERNAL (http://localhost:3000/node_modules/.vite/deps/recoil.js?v=8f9c04b2:2464:3) at RecoilRoot (http://localhost:3000/node_modules/.vite/deps/recoil.js?v=8f9c04b2:2575:5) at Wrapper (http://localhost:3000/src/Wrapper.tsx:25:3) at App React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. ```

When debugging I see ArrayFieldDescription at https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx#L179 is undefined.

sverhoeven commented 3 months ago

Still a problem, #137 could fix this bug as the new rjsf uses different way to render description, see https://github.com/rjsf-team/react-jsonschema-form/blob/ec932db942dd046640303056c89e3501b16ec469/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx#L53