@openmrs/esm-form-engine-lib 3.1.3-pre.1744 → 3.1.3-pre.1750

package/README.md

@@ -146,6 +146,26 @@ You could also optionally proxy to a different backend where your forms are host
 yarn start --sources packages/esm-form-engine-app --backend https://link-to-my-backend.com
 ```
 
+#### Troubleshooting linking issues
+
+You might run into dependency version mismatches when attempting to link the library to the consuming frontend module. `@carbon/react` is a common culprit. If you see an error like this in your terminal after running `yarn link`:
+
+```sh
+@carbon/react@npm:1.74.0 [5ffd1] conflicts with parent dependency @carbon/react@npm:1.60.3 [faad]
+```
+
+That's because the consuming frontend module is using a different version of `@carbon/react` than the Form Engine Lib.
+
+To resolve this, you set a `resolutions` field in your consuming frontend module's root `package.json` file to force the use of the same version of `@carbon/react` in the Form Engine Lib.
+
+```json
+"resolutions": {
+  "@carbon/react": "1.60.3"
+}
+```
+
+Once you've added the `resolutions` field, you'll need to run `yarn` again to install the dependencies. After that, you should be able to link the library to the consuming frontend module and run the consuming frontend module without any issues.
+
 ### Production
 
 Note that in addition to this library, other form engine alternatives exist within the O3 ecosystem, including:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "3.1.3-pre.1744",
+  "version": "3.1.3-pre.1750",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

package/src/components/group/obs-group.component.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { type FormFieldInputProps } from '../../types';
 import styles from './obs-group.scss';
-import { FormFieldRenderer, isGroupField } from '../renderer/field/form-field-renderer.component';
+import { ErrorFallback, FormFieldRenderer, isGroupField } from '../renderer/field/form-field-renderer.component';
 import { useFormProviderContext } from '../../provider/form-provider';
 import { FormGroup } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +18,11 @@ export const ObsGroup: React.FC<FormFieldInputProps> = ({ field, ...restProps })
         .filter((child) => !child.isHidden)
         .map((child, index) => {
           const key = `${child.id}_${index}`;
+          if (child.id === field.id) {
+            return (
+              <ErrorFallback error={new Error('ObsGroup child has same id as parent question')}/>
+            );
+          }
 
           if (child.type === 'obsGroup' && isGroupField(child.questionOptions.rendering)) {
             return (

package/src/components/renderer/field/form-field-renderer.component.tsx

@@ -215,7 +215,7 @@ export const FormFieldRenderer = ({ fieldId, valueAdapter, repeatOptions }: Form
   );
 };
 
-function ErrorFallback({ error }) {
+export function ErrorFallback({ error }) {
   const { t } = useTranslation();
   return (
     <ToastNotification