React error when a re-rendering fragment is sibling to uswdsjs-modified component

[jpandersen87]

Describe the bug A react error will occur when a fragment react node attempts to re-render when it is a sibling to a component that has been externally modified to have a different DOM tree structure by USWDS' javascript.

To Reproduce Steps to reproduce the behavior:

1. Go to this example reproduction project: https://stackblitz.com/edit/uwds-comet-uswdsjs-bug?file=src%2FApp.tsx
2. Click the 'Crash' button
3. Observe the caught error message under the button

Expected behavior The fragment to re-render without error.

Screenshots See repro.

Desktop (please complete the following information):

• OS: mac osx
• Browser: chrome
• Version: 127.0.6533.120

Smartphone (please complete the following information): n/a

Additional context All components that are subject to being externally modified by USWDS' js will have the potential to cause an error if the DOM tree structure is changed (aka the expected sibling html element is no longer a sibling when react attempts a dom operation). A potential quick fix is to wrap all affected components with another element so that the expected sibling remains correct (as the DOM tree modifications would happen inside the wrapper's children).

[jbouder]

It looks like there is some required setup missing in your app. In short you need the USWDS package as well as configurations to load in the USWDS SASS. The readme here details those steps: https://github.com/MetroStar/comet/tree/main/packages/comet-uswds#getting-started-with-a-custom-app-not-pre-configured-for-uswds.

Since you appear to be starting fresh however, I might suggest cloning or forking the starter app, to get up and running faster. You can find the repo here: https://github.com/MetroStar/comet-starter.

[jpandersen87]

It looks like there is some required setup missing in your app. In short you need the USWDS package as well as configurations to load in the USWDS SASS. The readme here details those steps: https://github.com/MetroStar/comet/tree/main/packages/comet-uswds#getting-started-with-a-custom-app-not-pre-configured-for-uswds.

Since you appear to be starting fresh however, I might suggest cloning or forking the starter app, to get up and running faster. You can find the repo here: https://github.com/MetroStar/comet-starter.

The repro has been updated to rule out comet setup.

[jbouder]

Ok, was able to reproduce. Definitely looks like it errors when the element before the File Input is rerendered. I was able to get past the issue by wrapping either the file input, wrapping the element before, or adding a label before. I would suggest the File Input should have a label, as suggested by USWDS.

With that said though, I am actually making some updates to the form components which simplifies adding labels, helper text. This will include the File Input, at which point I'll see what I can do to better handle this.

In the meantime though you should be able to resolve the issue by adding an appropriate label to the file input.

[jbouder]

FYI, i'm waiting on some PR reviews for the mentioned updates before publishing the next major version. In the meantime, if you wanted to test the fix, I published the following beta release: @metrostar/comet-uswds@3.0.0-beta.0.

I'll be doing more in depth testing and expect to have the major release published by the end of the week.

[jbouder]

Closing issue. New major release mentioned above includes a fix.