Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

topoaa.mol.description causes app to error #81

Open
sverhoeven opened this issue Jun 3, 2022 · 1 comment
Open

topoaa.mol.description causes app to error #81

sverhoeven opened this issue Jun 3, 2022 · 1 comment

Comments

@sverhoeven
Copy link
Member

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 
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 <ArrayFieldDescription2> 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 sverhoeven mentioned this issue Jun 3, 2022
Merged
@sverhoeven
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@sverhoeven